@extends('store.layout.main')

@php
    $sfThemes = [
        'forest' => ['label' => 'Sunny', 'desc' => 'Golden cream & amber', 'bg' => '#fffbe8', 'surface' => '#fff8d6', 'accent' => '#d97706'],
        'emerald' => ['label' => 'Emerald', 'desc' => 'Mint green & dark forest', 'bg' => '#edf6f2', 'surface' => '#f4fbf8', 'accent' => '#0d5c56'],
        'berry' => ['label' => 'Berry', 'desc' => 'Lavender & violet', 'bg' => '#f5f0fe', 'surface' => '#faf8ff', 'accent' => '#7c3aed'],
        'arctic' => ['label' => 'Arctic', 'desc' => 'Cool blue & navy', 'bg' => '#eef4fc', 'surface' => '#f6fafe', 'accent' => '#0e5fa8'],
        'mono' => ['label' => 'Mono', 'desc' => 'Pure black & white', 'bg' => '#f5f5f7', 'surface' => '#ffffff', 'accent' => '#1d1d1f'],
    ];
    $currentTheme = old('theme', $sf['theme'] ?? 'forest');
    $previewSrc = $branch->logo
        ? Storage::url($branch->logo)
        : ($business && $business->logo ? Storage::url($business->logo) : null);
    $isDefaultLogo = !$branch->logo && $business && $business->logo;
    $heroPreviewSrc = !empty($sf['hero_image']) ? Storage::url($sf['hero_image']) : null;
    $serializedSections = old('sections_json', json_encode($sections ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));
@endphp

@section('page-header')
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <div class="page-pretitle">Storefront</div>
                <h2 class="page-title">
                    Storefront Settings
                    <span class="badge bg-azure-lt text-azure ms-2" style="font-size:.7rem;vertical-align:middle;">Branch: {{ $branch->name }}</span>
                </h2>
            </div>
            <div class="col-auto">
                @if($branch->slug)
                <a href="{{ route('storefront.home', ['slug' => $branch->slug]) }}" target="_blank" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-box-arrow-up-right me-1"></i>Preview storefront
                </a>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('main-container')
    <div class="storefront-settings-main">
    <form id="storefront-settings-form" action="{{ route('store.storefront.update') }}" method="POST" enctype="multipart/form-data" data-save-url="{{ route('store.storefront.update') }}" data-filter-search-url="{{ route('store.storefront.filter-search') }}" data-branch-id="{{ $branch->id }}">
        @csrf
        <input type="hidden" name="branch_id" value="{{ $branch->id }}">

        <div class="card" style="width:100%;">
            <div class="card-header py-2 px-3">
                <div class="sf-tabs-header">
                <div class="position-relative d-inline-block">
                    <div id="sf-branch-pill"
                         class="sf-branch-fpill"
                         style="display:inline-flex;align-items:stretch;border-radius:20px;overflow:hidden;font-size:.73rem;font-weight:600;background:#e6f7f5;color:#0d5c56;white-space:nowrap;border:1.5px solid #0d5c562e;cursor:default;user-select:none">
                        <span class="d-inline-flex align-items-center gap-1" style="padding:4px 7px 4px 10px;pointer-events:none">
                            <span style="width:6px;height:6px;border-radius:50%;background:#0ca678;flex-shrink:0"></span>
                            <span id="sf-branch-pill-label">{{ $branch->name }}</span>
                        </span>
                        <span style="width:1px;background:rgba(0,0,0,.1);align-self:stretch;flex-shrink:0"></span>
                        <button type="button" class="sf-branch-toggle border-0 bg-transparent"
                                style="display:flex;align-items:center;padding:4px 9px;color:inherit;cursor:pointer;font-size:.68rem;line-height:1">
                            <i class="bi bi-chevron-down" id="sf-branch-icon"></i>
                        </button>
                    </div>
                    <div class="sf-branch-dropdown"
                         id="sf-branch-dropdown"
                         style="display:none;position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:190px;z-index:500;padding:4px">
                        @foreach(($branches ?? collect()) as $navBranch)
                            <button type="button" class="sf-branch-opt w-100 border-0 text-start"
                                    data-url="{{ route('store.storefront.settings', ['branch_id' => $navBranch->id]) }}"
                                    style="display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:.76rem;font-weight:{{ (int)$branch->id === (int)$navBranch->id ? '600' : '400' }};color:{{ (int)$branch->id === (int)$navBranch->id ? '#0d5c56' : '#374151' }};background:{{ (int)$branch->id === (int)$navBranch->id ? '#e6f7f5' : 'transparent' }}">
                                <span style="width:8px;height:8px;border-radius:50%;background:{{ (int)$branch->id === (int)$navBranch->id ? '#0ca678' : '#94a3b8' }};flex-shrink:0"></span>
                                {{ $navBranch->name }}
                                @if((int)$branch->id === (int)$navBranch->id)<i class="bi bi-check2 ms-auto" style="font-size:.7rem"></i>@endif
                            </button>
                        @endforeach
                    </div>
                </div>
                <ul class="nav branch-tabs mb-0 flex-grow-1" id="tabs-sf-settings">
                    <li class="nav-item">
                        <a href="#tab-appearance" class="nav-link active" data-bs-toggle="tab" role="tab">
                            <i class="bi bi-palette me-2"></i>Appearance
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab-brands" class="nav-link" data-bs-toggle="tab" role="tab">
                            <i class="bi bi-patch-check me-2"></i>Brands
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab-homepage" class="nav-link" data-bs-toggle="tab" role="tab">
                            <i class="bi bi-house me-2"></i>Homepage
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab-announce" class="nav-link" data-bs-toggle="tab" role="tab">
                            <i class="bi bi-megaphone me-2"></i>Announcement
                        </a>
                    </li>
                </ul>
                </div>
            </div>

            <div class="card-body tab-content">

                <div class="tab-pane active show" id="tab-appearance">
                    <div class="row g-4">
                        <div class="col-12">
                            <label class="form-label fw-semibold">{{ __('Colour theme') }}</label>
                            <p class="text-muted small mb-3">{{ __('Applies to the public storefront for this branch.') }}</p>
                            <div class="sf-theme-picker">
                                @foreach($sfThemes as $themeKey => $theme)
                                    <label class="sf-theme-card {{ $currentTheme === $themeKey ? 'is-selected' : '' }}">
                                        <input type="radio" name="theme" value="{{ $themeKey }}" class="sf-theme-radio sf-theme-radio--sf"
                                               {{ $currentTheme === $themeKey ? 'checked' : '' }}>
                                        <div class="sf-theme-preview" style="background:{{ $theme['bg'] }};">
                                            <div class="sf-theme-preview__header" style="background:{{ $theme['bg'] }};border-bottom:2px solid {{ $theme['accent'] }}20;box-shadow:0 1px 4px {{ $theme['accent'] }}18;">
                                                <span class="sf-theme-preview__dot" style="background:{{ $theme['accent'] }};opacity:.8;"></span>
                                                <span class="sf-theme-preview__bar" style="background:{{ $theme['accent'] }};opacity:.2;"></span>
                                            </div>
                                            <div class="sf-theme-preview__body">
                                                <div class="sf-theme-preview__card" style="background:{{ $theme['surface'] }};">
                                                    <div class="sf-theme-preview__line" style="background:{{ $theme['accent'] }};opacity:.15;"></div>
                                                    <div class="sf-theme-preview__line sf-theme-preview__line--sm" style="background:{{ $theme['accent'] }};opacity:.1;"></div>
                                                    <div class="sf-theme-preview__btn" style="background:{{ $theme['accent'] }};"></div>
                                                </div>
                                                <div class="sf-theme-preview__card" style="background:{{ $theme['surface'] }};">
                                                    <div class="sf-theme-preview__line" style="background:{{ $theme['accent'] }};opacity:.15;"></div>
                                                    <div class="sf-theme-preview__line sf-theme-preview__line--sm" style="background:{{ $theme['accent'] }};opacity:.1;"></div>
                                                    <div class="sf-theme-preview__btn" style="background:{{ $theme['accent'] }};"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sf-theme-card__meta">
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="sf-theme-swatch" style="background:{{ $theme['accent'] }};"></span>
                                                <strong class="small">{{ $theme['label'] }}</strong>
                                                @if($currentTheme === $themeKey)
                                                    <span class="badge bg-success-lt text-success ms-auto">{{ __('Active') }}</span>
                                                @endif
                                            </div>
                                            <span class="text-muted" style="font-size:.72rem;">{{ $theme['desc'] }}</span>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane" id="tab-brands">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">{{ __('Branch logo (storefront & header)') }}</label>
                            <p class="text-muted small mb-2">{{ __('Upload a branch-specific logo. If not set, your business logo is used on the storefront.') }}</p>

                            <div class="branding-inline">
                                <div class="branding-preview-wrap">
                                    <div class="branding-preview-box clickable logo-picker-trigger"
                                         data-input-target="storefront-logo-input">
                                        @if($previewSrc)
                                            <img src="{{ $previewSrc }}" alt="{{ __('Logo preview') }}"
                                                 class="branding-preview-img storefront-logo-preview">
                                        @else
                                            <div class="storefront-logo-preview text-muted small">{{ __('No logo') }}</div>
                                        @endif
                                    </div>
                                    <button type="button"
                                            class="logo-remove-btn storefront-logo-remove-btn"
                                            title="{{ __('Remove logo') }}"
                                            aria-label="{{ __('Remove logo') }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <path d="M4 7l16 0"/>
                                            <path d="M10 11l0 6"/>
                                            <path d="M14 11l0 6"/>
                                            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/>
                                            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/>
                                        </svg>
                                    </button>
                                    <input type="hidden" name="remove_logo" class="storefront-remove-logo-input" value="0">
                                    <span id="storefront-logo-status-badge" class="badge small {{ $branch->logo ? 'bg-blue-lt text-blue' : 'bg-secondary-lt text-secondary' }}">
                                        @if($branch->logo)
                                            {{ __('Branch logo') }}
                                        @elseif($isDefaultLogo)
                                            {{ __('Using business logo') }}
                                        @else
                                            {{ __('No logo') }}
                                        @endif
                                    </span>
                                </div>
                                <div>
                                    <input type="file" name="logo" id="storefront-logo-input"
                                           class="form-control @error('logo') is-invalid @enderror"
                                           accept="image/*">
                                    <div class="form-hint mt-1">{{ __('PNG, JPG — max 500 KB. Recommended: 300×300 px.') }}</div>
                                    @error('logo')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane w-100" id="tab-homepage">

                    {{-- ── Hero Section ──────────────────────────────────────────── --}}
                    <div class="sf-hp-section mb-4">
                        <div class="sf-section-label"><i class="bi bi-image me-1"></i>{{ __('Hero Section') }}</div>

                        <input type="file" name="hero_image" id="storefront-hero-image-input" class="d-none" accept="image/*">
                        <input type="hidden" name="remove_hero_image" class="storefront-remove-hero-image-input" value="0">
                        @error('hero_image')<div class="text-danger small mb-1">{{ $message }}</div>@enderror

                        <div class="sf-hero-layout">
                            {{-- Left: compact image upload --}}
                            <div class="sf-hero-layout__img">
                                <div class="sf-hero-upload-box sf-hero-upload-box--compact" id="sf-hero-upload-box">
                                    <img src="{{ $heroPreviewSrc ?? '' }}" alt="{{ __('Hero image') }}"
                                         class="sf-hero-upload-box__img {{ $heroPreviewSrc ? '' : 'd-none' }}" id="sf-hero-img">
                                    <div class="sf-hero-upload-box__placeholder {{ $heroPreviewSrc ? 'd-none' : '' }}" id="sf-hero-placeholder">
                                        <i class="bi bi-image-fill" style="font-size:1.6rem;opacity:.35;"></i>
                                        <span style="font-size:.78rem;">{{ __('Click to upload') }}</span>
                                        <small style="font-size:.7rem;opacity:.6;">{{ __('1400 × 520 px · wide landscape') }}</small>
                                    </div>
                                    <button type="button" class="sf-hero-upload-box__remove {{ $heroPreviewSrc ? '' : 'd-none' }}"
                                            id="sf-hero-remove-btn" title="{{ __('Remove') }}">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                    <button type="button" class="sf-hero-upload-box__edit {{ $heroPreviewSrc ? '' : 'd-none' }}"
                                            id="sf-hero-change-btn">
                                        <i class="bi bi-pencil me-1"></i>{{ __('Change') }}
                                    </button>
                                </div>
                                <p class="mt-2 mb-0 text-muted d-flex align-items-center gap-1" style="font-size:.72rem;line-height:1.4;">
                                    <i class="bi bi-info-circle" style="flex-shrink:0;"></i>
                                    {{ __('Recommended: 1400 × 520 px (wide landscape). The storefront hero shows the full image (no cropping): it scales to fit inside the banner; other shapes may show slim bands on the sides or top and bottom.') }}
                                </p>
                            </div>

                            {{-- Right: hero text fields --}}
                            <div class="sf-hero-layout__fields">
                                <div class="mb-3">
                                    <label class="form-label">{{ __('Hero title') }}</label>
                                    <input type="text" name="hero_title" class="form-control"
                                           value="{{ old('hero_title', $sf['hero_title'] ?? '') }}"
                                           placeholder="{{ __('Quality you can see') }}">
                                </div>
                                <div>
                                    <label class="form-label">{{ __('Subtitle') }}</label>
                                    <textarea name="hero_subtitle" class="form-control" rows="4"
                                              placeholder="{{ __('Short line below the title…') }}">{{ old('hero_subtitle', $sf['hero_subtitle'] ?? '') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ── Three highlight cards (under hero on storefront) ─────────── --}}
                    <div class="sf-hp-section mb-4">
                        <div class="sf-section-label mb-3"><i class="bi bi-stars me-1"></i>{{ __('Highlight cards') }}</div>
                        <p class="text-muted small mb-3">{{ __('Three tiles shown in a row under the hero. Add a small image, heading, and short text for each.') }}</p>
                        <div class="row g-3">
                            @for($i = 0; $i < 3; $i++)
                                @php
                                    $oc = $offerCards[$i] ?? ['image' => '', 'title' => '', 'text' => ''];
                                    $ocImgSrc = !empty($oc['image']) ? Storage::url($oc['image']) : null;
                                @endphp
                                <div class="col-md-4">
                                    <div class="sf-offer-edit-card h-100">
                                        <div class="text-muted small fw-semibold mb-2">{{ __('Card') }} {{ $i + 1 }}</div>

                                        <input type="file" name="offer_card_image_{{ $i }}" id="offer-card-image-{{ $i }}" class="d-none" accept="image/*">
                                        <input type="hidden" name="remove_offer_card_image_{{ $i }}" id="offer-card-remove-{{ $i }}" value="0">

                                        <div class="sf-hero-upload-box sf-hero-upload-box--mini mx-auto mb-3" id="sf-offer-upload-{{ $i }}">
                                            <img src="{{ $ocImgSrc ?? '' }}" alt=""
                                                 class="sf-hero-upload-box__img {{ $ocImgSrc ? '' : 'd-none' }}" id="offer-card-img-{{ $i }}">
                                            <div class="sf-hero-upload-box__placeholder {{ $ocImgSrc ? 'd-none' : '' }}" id="offer-card-ph-{{ $i }}">
                                                <i class="bi bi-image" style="font-size:1.35rem;opacity:.4;"></i>
                                                <span style="font-size:.72rem;">{{ __('Upload') }}</span>
                                                <small style="font-size:.65rem;opacity:.65;">{{ __('e.g. 400×400') }}</small>
                                            </div>
                                            <button type="button" class="sf-hero-upload-box__remove {{ $ocImgSrc ? '' : 'd-none' }}"
                                                    id="offer-card-rm-{{ $i }}" title="{{ __('Remove') }}">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                            <button type="button" class="sf-hero-upload-box__edit {{ $ocImgSrc ? '' : 'd-none' }}"
                                                    id="offer-card-ch-{{ $i }}">
                                                <i class="bi bi-pencil me-1"></i>{{ __('Change') }}
                                            </button>
                                        </div>

                                        <label class="form-label small mb-1">{{ __('Heading') }}</label>
                                        <input type="text" name="offer_card_title_{{ $i }}" class="form-control form-control-sm mb-2"
                                               value="{{ old('offer_card_title_'.$i, $oc['title'] ?? '') }}"
                                               maxlength="120" placeholder="{{ __('Short title') }}">

                                        <label class="form-label small mb-1">{{ __('Description') }}</label>
                                        <textarea name="offer_card_text_{{ $i }}" class="form-control form-control-sm" rows="3"
                                                  maxlength="500" placeholder="{{ __('One or two sentences…') }}">{{ old('offer_card_text_'.$i, $oc['text'] ?? '') }}</textarea>
                                        @error('offer_card_image_'.$i)<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>

                    {{-- ── Homepage Sections ─────────────────────────────────────── --}}
                    <div class="sf-hp-section">
                        <div class="sf-section-label mb-3"><i class="bi bi-layout-text-window-reverse me-1"></i>{{ __('Homepage Sections') }}</div>
                        <input type="hidden" id="sf-sections-json" name="sections_json" value="{{ $serializedSections }}">
                        <div id="sf-sections-list" class="mb-3" style="width:100%;display:flex;flex-direction:column;gap:10px;padding:0 2px;"></div>
                        <button type="button" class="sfl-add-btn" id="sf-add-section-btn">
                            <i class="bi bi-plus-circle"></i>{{ __('Add custom section') }}
                        </button>
                    </div>

                </div>

                <div class="tab-pane" id="tab-announce">
                    <div class="row g-3">
                        <div class="col-12">
                            <p class="text-muted small mb-2">{{ __('A slim banner shown at the top of every storefront page for this branch.') }}</p>
                        </div>
                        <div class="col-12">
                            <label class="d-flex align-items-center gap-2">
                                <input type="hidden" name="announcement_enabled" value="0">
                                <input type="checkbox" name="announcement_enabled" value="1" class="form-check-input m-0"
                                       id="announceToggle"
                                       {{ ($sf['announcement_enabled'] ?? false) ? 'checked' : '' }}>
                                <span class="fw-semibold">{{ __('Enable announcement bar') }}</span>
                            </label>
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('Message') }}</label>
                            <input type="text" name="announcement" class="form-control"
                                   value="{{ old('announcement', $sf['announcement'] ?? '') }}"
                                   maxlength="300"
                                   placeholder="{{ __('e.g. Free delivery on orders over Rs 2,000 this week!') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ __('Bar colour') }}</label>
                            @php $annColor = $sf['announcement_color'] ?? 'accent'; @endphp
                            <select name="announcement_color" class="form-select">
                                <option value="accent" {{ $annColor === 'accent' ? 'selected' : '' }}>{{ __('Brand accent') }}</option>
                                <option value="dark" {{ $annColor === 'dark' ? 'selected' : '' }}>{{ __('Dark') }}</option>
                                <option value="info" {{ $annColor === 'info' ? 'selected' : '' }}>{{ __('Info (blue)') }}</option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>

            <div class="card-footer text-center">
                <button type="submit" class="btn btn-primary px-4 storefront-save-trigger" id="storefront-save-btn">
                    <i class="bi bi-check2-circle me-1 storefront-save-icon"></i>
                    <span class="storefront-save-label">{{ __('Save Storefront Settings') }}</span>
                </button>
            </div>
        </div>

        {{-- Fixed save when footer button is off-screen --}}
        <div id="storefront-save-float" class="storefront-save-float" role="presentation">
            <button type="submit" class="btn btn-primary px-4 shadow-lg storefront-save-trigger" id="storefront-save-btn-float">
                <i class="bi bi-check2-circle me-1 storefront-save-icon"></i>
                <span class="storefront-save-label">{{ __('Save Storefront Settings') }}</span>
            </button>
        </div>
    </form>
    </div>
@endsection

@section('style')
<style>
/* ── Tabs header with branch dropdown ─────────────────────────────────── */
.sf-tabs-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.sf-branch-fpill {
    flex-shrink: 0;
}
.sf-branch-dropdown .sf-branch-opt:hover {
    background: #f8fafc !important;
}
@media (max-width: 991.98px) {
    .sf-tabs-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Shared dropdown ───────────────────────────────────────────────────── */
.pf-tag-dropdown {
    position: absolute; top: calc(100% + 3px); left: 0; right: 0;
    z-index: 1050; max-height: 200px; overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(13,92,86,.18);
    border-radius: .45rem;
    box-shadow: 0 6px 20px rgba(13,92,86,.12), 0 2px 6px rgba(0,0,0,.06);
}
.pf-tag-item {
    display: flex; align-items: center; gap: 8px;
    padding: .4rem .75rem; cursor: pointer; transition: background .12s; background: #fff;
}
.pf-tag-item:hover { background: rgba(13,92,86,.05); }
.pf-tag-item + .pf-tag-item { border-top: 1px solid rgba(13,92,86,.07); }

/* ── Hero 2-column layout ──────────────────────────────────────────────── */
.sf-hero-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}
.sf-hero-upload-box--compact {
    aspect-ratio: 1400 / 520 !important;
}
@media (max-width: 640px) {
    .sf-hero-layout { grid-template-columns: 1fr; }
    .sf-hero-upload-box--compact { aspect-ratio: 1400 / 520 !important; }
}

/* ── Section rows ──────────────────────────────────────────────────────── */
.sfl-row {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, opacity .18s, transform .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
}
.sfl-row.is-editing {
    border-color: #0d5c56;
    box-shadow: 0 0 0 3px rgba(13,92,86,.1), 0 4px 16px rgba(13,92,86,.08);
}
.sfl-row.is-dragging { opacity: .45; transform: scale(.985); }
.sfl-row.drag-over {
    border-color: #0d5c56;
    box-shadow: 0 0 0 2.5px rgba(13,92,86,.25), 0 4px 20px rgba(13,92,86,.1);
    background: rgba(13,92,86,.02);
}
.sfl-row.is-hidden-sec .sfl-info { opacity: .4; }
.sfl-row__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 13px 18px;
    min-height: 62px;
    gap: 10px;
}
.sfl-row__body-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* Drag handle */
.sfl-drag-handle {
    display: flex; align-items: center; justify-content: center;
    width: 20px; flex-shrink: 0; cursor: grab;
    color: #ced4da; font-size: 1rem; transition: color .12s; user-select: none;
}
.sfl-drag-handle:hover { color: #94a3b8; }
.sfl-drag-handle:active { cursor: grabbing; }
.sfl-reorder { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sfl-btn-order {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 18px; padding: 0;
    border: 1px solid #dee2e6; border-radius: 4px;
    background: #f8f9fa; color: #6c757d;
    font-size: .58rem; cursor: pointer; line-height: 1;
    transition: background .1s, color .1s, border-color .1s;
}
.sfl-btn-order:hover:not(:disabled) { background: #0d5c56; border-color: #0d5c56; color: #fff; }
.sfl-btn-order:disabled { opacity: .28; cursor: default; }
.sfl-info {
    flex: 0 0 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px; overflow: hidden;
}
.sfl-filter-center {
    display: flex; flex-wrap: wrap; gap: 5px;
    align-items: center; justify-content: center;
    padding: 4px 8px; min-width: 0;
}
.sfl-name {
    font-weight: 600; font-size: .875rem; color: #1d273b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}
.sfl-type-badge { font-size: .62rem; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
.sfl-mode-pill {
    font-size: .7rem; color: #94a3b8; white-space: nowrap; flex-shrink: 0;
}
.sfl-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; justify-content: flex-end; }
.sfl-act-divider { width: 1px; height: 22px; background: #eaecf0; flex-shrink: 0; }
/* Edit button – teal themed */
.sfl-btn-edit {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; font-size: .8rem; font-weight: 600;
    border-radius: 8px; border: 1.5px solid #0d5c56;
    color: #0d5c56; background: transparent;
    cursor: pointer; white-space: nowrap;
    transition: background .14s, color .14s, box-shadow .14s;
}
.sfl-btn-edit:hover { background: #0d5c56; color: #fff; box-shadow: 0 2px 8px rgba(13,92,86,.25); }
.sfl-btn-edit.is-open { background: #0d5c56; color: #fff; }
.sfl-btn-edit.is-open:hover { background: #0a4a45; border-color: #0a4a45; }
/* Delete button */
.sfl-btn-delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    border: 1.5px solid rgba(214,57,57,.3);
    color: #d63939; background: rgba(214,57,57,.05);
    cursor: pointer; font-size: .95rem;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.sfl-btn-delete:hover { background: #d63939; color: #fff; border-color: #d63939; box-shadow: 0 2px 8px rgba(214,57,57,.3); }
/* Expanded panel */
.sfl-panel {
    border-top: 1px solid #eef0f3;
    background: #f9fafb;
    padding: 16px 14px 14px;
    animation: sflPanelIn .15s ease;
}
@keyframes sflPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sfl-panel__footer { border-top: 1px solid #e9ecef; display: flex; align-items: center; gap: 8px; }
/* Panel footer delete (text+icon variant) */
.sfl-panel-btn-delete {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: .8rem; font-weight: 500;
    border-radius: 8px; border: 1.5px solid rgba(214,57,57,.3);
    color: #d63939; background: rgba(214,57,57,.05);
    cursor: pointer; white-space: nowrap;
    transition: background .14s, color .14s, border-color .14s;
}
.sfl-panel-btn-delete:hover { background: #d63939; color: #fff; border-color: #d63939; }
/* Chips */
.sfl-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; align-items: center; }
.sfl-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; border: 1px solid #dee2e6;
    border-radius: 20px; padding: 3px 8px 3px 5px;
    font-size: .775rem; line-height: 1.5;
}
.sfl-chip__badge {
    font-size: .58rem; padding: 2px 5px; border-radius: 3px;
    font-weight: 700; letter-spacing: .02em; line-height: 1.4;
}
.sfl-chip__badge--cat  { background: rgba(14,95,168,.1);  color: #0e5fa8; }
.sfl-chip__badge--tag  { background: rgba(13,92,86,.1);   color: #0d5c56; }
.sfl-chip__badge--prod { background: rgba(234,88,12,.1);  color: #ea580c; }
.sfl-chip__remove {
    background: none; border: none; padding: 0; margin-left: 1px;
    color: #adb5bd; cursor: pointer; font-size: .8rem; line-height: 1;
}
.sfl-chip__remove:hover { color: #d63939; }
/* Add section dashed button */
.sfl-add-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 14px 16px;
    border: 2px dashed #0d5c56; border-radius: 10px;
    background: rgba(13,92,86,.05); color: #0d5c56; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
    letter-spacing: .01em;
}
.sfl-add-btn i { font-size: 1.05rem; }
.sfl-add-btn:hover { border-color: #0a4a45; color: #0a4a45; background: rgba(13,92,86,.12); }
/* Custom teal toggle switch */
.sfl-toggle {
    position: relative; display: inline-flex; align-items: center;
    cursor: pointer; flex-shrink: 0;
}
.sfl-toggle__input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.sfl-toggle__slider {
    width: 38px; height: 22px;
    background: #dee2e6; border-radius: 22px;
    transition: background .2s; position: relative;
}
.sfl-toggle__slider::after {
    content: ''; position: absolute;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px;
    transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.22);
}
.sfl-toggle__input:checked + .sfl-toggle__slider { background: #0d5c56; }
.sfl-toggle__input:checked + .sfl-toggle__slider::after { transform: translateX(16px); }
.sfl-chip--preview { font-size: .73rem; background: #f4f6f8; }

/* Floating save: centered over .container-xl (main settings column), not full viewport */
.storefront-save-float {
    position: fixed;
    left: 50%;
    bottom: 1.35rem;
    transform: translateX(-50%);
    z-index: 1030;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    padding: 0 1rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
    /* `left` is set in px from JS to match dashboard content area */
}
.storefront-save-float .storefront-save-trigger {
    pointer-events: auto;
    border-radius: 999px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Tabler uses rgba primary @ .8 on hover — keep save buttons fully opaque */
.storefront-save-trigger.btn-primary {
    --tblr-btn-hover-bg: var(--tblr-primary);
    --tblr-btn-active-bg: var(--tblr-primary);
}
.storefront-save-float.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(12px);
    pointer-events: none;
}
.storefront-save-float:not(.is-hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
</style>
@endsection

@section('script')
<script>
(function () {
    var form = document.getElementById('storefront-settings-form');
    var btn = document.getElementById('storefront-save-btn');
    if (!form || !btn) return;

    var floatWrap = document.getElementById('storefront-save-float');

    function syncStorefrontFloatCenter() {
        if (!floatWrap) return;
        var box = form.closest('.storefront-settings-main') || form.closest('.container-xl') || form.closest('.page-body');
        if (!box) {
            floatWrap.style.left = '';
            return;
        }
        var r = box.getBoundingClientRect();
        floatWrap.style.left = (r.left + r.width * 0.5) + 'px';
    }
    syncStorefrontFloatCenter();
    window.addEventListener('resize', syncStorefrontFloatCenter);
    if (typeof ResizeObserver !== 'undefined') {
        var floatRo = new ResizeObserver(syncStorefrontFloatCenter);
        var floatCenterBox = form.closest('.storefront-settings-main') || form.closest('.container-xl') || form.closest('.page-body');
        if (floatCenterBox) floatRo.observe(floatCenterBox);
        var pageWrap = document.querySelector('.page .page-wrapper');
        if (pageWrap) floatRo.observe(pageWrap);
    }

    if (floatWrap && 'IntersectionObserver' in window) {
        floatWrap.classList.add('is-hidden');
        var io = new IntersectionObserver(
            function (entries) {
                var e = entries[0];
                var footerVisible = e.isIntersecting && e.intersectionRatio > 0;
                floatWrap.classList.toggle('is-hidden', footerVisible);
            },
            { root: null, threshold: 0, rootMargin: '0px 0px 0px 0px' }
        );
        io.observe(btn);
    } else if (floatWrap) {
        floatWrap.classList.add('is-hidden');
    }

    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';

    if (typeof toastr !== 'undefined') {
        toastr.options.closeButton = true;
        toastr.options.progressBar = true;
        toastr.options.positionClass = 'toast-top-right';
        toastr.options.timeOut = 4500;
    }

    function clearFieldErrors() {
        form.querySelectorAll('.is-invalid').forEach(function (el) { el.classList.remove('is-invalid'); });
        form.querySelectorAll('.storefront-ajax-err').forEach(function (el) { el.remove(); });
    }

    function applyFieldErrors(errors) {
        if (!errors || typeof errors !== 'object') return;
        Object.keys(errors).forEach(function (key) {
            var msg = Array.isArray(errors[key]) ? errors[key][0] : errors[key];
            var guess = key;
            if (key.indexOf('.') !== -1) {
                var p = key.split('.');
                guess = p[0] + '[' + p.slice(1).join('][') + ']';
            }

            var input = form.querySelector('[name="' + key + '"]') || form.querySelector('[name="' + guess + '"]');
            if (!input) return;

            input.classList.add('is-invalid');
            var wrap = input.closest('.col-12, .col-md-6, .col-md-4') || input.parentElement;
            if (wrap && !wrap.querySelector('.storefront-ajax-err')) {
                var div = document.createElement('div');
                div.className = 'invalid-feedback d-block storefront-ajax-err';
                div.textContent = msg;
                wrap.appendChild(div);
            }
        });
    }

    function updateLogoPreviewFromServer(previewUrl, hasBranchLogo) {
        previewUrl = previewUrl || null;
        var badge = document.getElementById('storefront-logo-status-badge');

        if (badge) {
            if (hasBranchLogo) {
                badge.className = 'badge bg-blue-lt text-blue small';
                badge.textContent = @json(__('Branch logo'));
            } else if (previewUrl) {
                badge.className = 'badge bg-secondary-lt text-secondary small';
                badge.textContent = @json(__('Using business logo'));
            } else {
                badge.className = 'badge bg-secondary-lt text-secondary small';
                badge.textContent = @json(__('No logo'));
            }
        }

        var target = form.querySelector('.storefront-logo-preview');
        if (!previewUrl) {
            if (target && target.tagName.toLowerCase() === 'img') {
                var noImgDiv = document.createElement('div');
                noImgDiv.className = 'storefront-logo-preview text-muted small';
                noImgDiv.textContent = @json(__('No logo'));
                target.replaceWith(noImgDiv);
            } else if (target) {
                target.textContent = @json(__('No logo'));
            }
            return;
        }

        if (target && target.tagName.toLowerCase() === 'img') {
            target.src = previewUrl;
            return;
        }
        if (target) {
            var imgEl = document.createElement('img');
            imgEl.src = previewUrl;
            imgEl.alt = 'Logo';
            imgEl.className = 'branding-preview-img storefront-logo-preview';
            target.replaceWith(imgEl);
        }
    }

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        clearFieldErrors();

        var url = form.dataset.saveUrl || form.action;
        var saveBtns = form.querySelectorAll('.storefront-save-trigger');

        saveBtns.forEach(function (b) {
            b.disabled = true;
            var iconWrap = b.querySelector('.storefront-save-icon');
            if (iconWrap) {
                iconWrap.outerHTML = '<span class="spinner-border spinner-border-sm me-1 storefront-save-icon" role="status" aria-hidden="true"></span>';
            }
            var label = b.querySelector('.storefront-save-label');
            if (label) label.textContent = @json(__('Saving…'));
        });

        try {
            var res = await fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    Accept: 'application/json',
                    'X-CSRF-TOKEN': csrf || ''
                },
                body: new FormData(form)
            });

            var data = {};
            try {
                data = await res.json();
            } catch (_) {}

            if (res.ok && data.ok) {
                if (typeof toastr !== 'undefined') {
                    toastr.success(data.message || @json(__('Saved.')));
                }
                var rm = form.querySelector('.storefront-remove-logo-input');
                if (rm) rm.value = '0';
                var fileIn = document.getElementById('storefront-logo-input');
                if (fileIn) fileIn.value = '';
                updateLogoPreviewFromServer(data.preview_logo_url, !!data.has_branch_logo);

                var heroImg = document.getElementById('sf-hero-img');
                var heroFileIn = document.getElementById('storefront-hero-image-input');
                var heroRmHidden = document.querySelector('.storefront-remove-hero-image-input');
                var heroPh = document.getElementById('sf-hero-placeholder');
                var heroRmBtn = document.getElementById('sf-hero-remove-btn');
                var heroChBtn = document.getElementById('sf-hero-change-btn');
                if (data.preview_hero_image_url) {
                    var u = data.preview_hero_image_url + (data.preview_hero_image_url.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now();
                    if (heroImg) {
                        heroImg.src = u;
                        heroImg.classList.remove('d-none');
                    }
                    if (heroPh) heroPh.classList.add('d-none');
                    if (heroRmBtn) heroRmBtn.classList.remove('d-none');
                    if (heroChBtn) heroChBtn.classList.remove('d-none');
                    if (heroRmHidden) heroRmHidden.value = '0';
                } else {
                    if (heroImg) {
                        heroImg.src = '';
                        heroImg.classList.add('d-none');
                    }
                    if (heroPh) heroPh.classList.remove('d-none');
                    if (heroRmBtn) heroRmBtn.classList.add('d-none');
                    if (heroChBtn) heroChBtn.classList.add('d-none');
                }
                if (heroFileIn) heroFileIn.value = '';
            } else if (res.status === 422 && data.errors) {
                applyFieldErrors(data.errors);
                var firstErrMsg = '';
                Object.keys(data.errors).some(function (k) {
                    var m = data.errors[k];
                    firstErrMsg = Array.isArray(m) ? m[0] : m;
                    return true;
                });
                if (typeof toastr !== 'undefined') {
                    toastr.error(firstErrMsg || @json(__('Please fix the highlighted fields.')));
                }
            } else if (typeof toastr !== 'undefined') {
                toastr.error(data.message || @json(__('Something went wrong. Try again.')));
            }
        } catch (_) {
            if (typeof toastr !== 'undefined') {
                toastr.error(@json(__('Network error. Check your connection.')));
            }
        } finally {
            saveBtns.forEach(function (b) {
                b.disabled = false;
                var spinner = b.querySelector('.storefront-save-icon.spinner-border');
                if (spinner) {
                    spinner.outerHTML = '<i class="bi bi-check2-circle me-1 storefront-save-icon"></i>';
                }
                var lab = b.querySelector('.storefront-save-label');
                if (lab) {
                    lab.textContent = @json(__('Save Storefront Settings'));
                }
            });
        }
    });
})();

document.querySelectorAll('.logo-picker-trigger').forEach(function (box) {
    box.addEventListener('click', function () {
        var id = this.dataset.inputTarget;
        var input = document.getElementById(id);
        if (input) input.click();
    });
});

var sfLogoInput = document.getElementById('storefront-logo-input');
var sfLogoRemove = document.querySelector('.storefront-remove-logo-input');
if (sfLogoInput) {
    sfLogoInput.addEventListener('change', function () {
        var target = document.querySelector('.storefront-logo-preview');
        if (!target || !this.files || !this.files[0]) return;
        if (sfLogoRemove) sfLogoRemove.value = '0';
        var file = this.files[0];
        if (!file.type || file.type.indexOf('image/') !== 0) return;
        var reader = new FileReader();
        reader.onload = function (e) {
            if (target.tagName && target.tagName.toLowerCase() === 'img') {
                target.src = e.target.result;
                return;
            }
            var img = document.createElement('img');
            img.src = e.target.result;
            img.alt = 'Logo';
            img.className = 'branding-preview-img storefront-logo-preview';
            target.replaceWith(img);
        };
        reader.readAsDataURL(file);
    });
}

var sfRemoveBtn = document.querySelector('.storefront-logo-remove-btn');
if (sfRemoveBtn) {
    sfRemoveBtn.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        var input = document.getElementById('storefront-logo-input');
        var ri = document.querySelector('.storefront-remove-logo-input');
        var target = document.querySelector('.storefront-logo-preview');
        if (input) input.value = '';
        if (ri) ri.value = '1';
        if (!target) return;
        if (target.tagName && target.tagName.toLowerCase() === 'img') {
            var div = document.createElement('div');
            div.className = 'storefront-logo-preview text-muted small';
            div.textContent = 'No logo';
            target.replaceWith(div);
            return;
        }
        target.textContent = 'No logo';
    });
}

// ── Hero image upload box ────────────────────────────────────────────────
(function () {
    var box        = document.getElementById('sf-hero-upload-box');
    var fileInput  = document.getElementById('storefront-hero-image-input');
    var imgEl      = document.getElementById('sf-hero-img');
    var placeholder= document.getElementById('sf-hero-placeholder');
    var removeBtn  = document.getElementById('sf-hero-remove-btn');
    var changeBtn  = document.getElementById('sf-hero-change-btn');
    var removeHidden = document.querySelector('.storefront-remove-hero-image-input');
    if (!box || !fileInput) return;

    function showImage(src) {
        imgEl.src = src;
        imgEl.classList.remove('d-none');
        if (placeholder) placeholder.classList.add('d-none');
        if (removeBtn) removeBtn.classList.remove('d-none');
        if (changeBtn) changeBtn.classList.remove('d-none');
    }
    function clearImage() {
        fileInput.value = '';
        imgEl.src = '';
        imgEl.classList.add('d-none');
        if (placeholder) placeholder.classList.remove('d-none');
        if (removeBtn) removeBtn.classList.add('d-none');
        if (changeBtn) changeBtn.classList.add('d-none');
        if (removeHidden) removeHidden.value = '1';
    }

    box.addEventListener('click', function (e) {
        if (e.target.closest('#sf-hero-remove-btn') || e.target.closest('#sf-hero-change-btn')) return;
        if (imgEl && !imgEl.classList.contains('d-none')) return; // already has image — use Change btn
        fileInput.click();
    });
    if (changeBtn) changeBtn.addEventListener('click', function (e) { e.stopPropagation(); fileInput.click(); });
    if (removeBtn) removeBtn.addEventListener('click', function (e) { e.stopPropagation(); clearImage(); });

    fileInput.addEventListener('change', function () {
        if (!this.files || !this.files[0]) return;
        var file = this.files[0];
        if (!file.type || !file.type.startsWith('image/')) return;
        if (removeHidden) removeHidden.value = '0';
        var reader = new FileReader();
        reader.onload = function (ev) { showImage(ev.target.result); };
        reader.readAsDataURL(file);
    });
})();

// ── Highlight card image uploads (3 mini boxes) ─────────────────────────
(function () {
    function bindOfferSlot(i) {
        var box = document.getElementById('sf-offer-upload-' + i);
        var fileInput = document.getElementById('offer-card-image-' + i);
        if (!box || !fileInput) return;
        var imgEl = document.getElementById('offer-card-img-' + i);
        var placeholder = document.getElementById('offer-card-ph-' + i);
        var removeBtn = document.getElementById('offer-card-rm-' + i);
        var changeBtn = document.getElementById('offer-card-ch-' + i);
        var removeHidden = document.getElementById('offer-card-remove-' + i);

        function showImage(src) {
            imgEl.src = src;
            imgEl.classList.remove('d-none');
            if (placeholder) placeholder.classList.add('d-none');
            if (removeBtn) removeBtn.classList.remove('d-none');
            if (changeBtn) changeBtn.classList.remove('d-none');
        }
        function clearImage() {
            fileInput.value = '';
            imgEl.src = '';
            imgEl.classList.add('d-none');
            if (placeholder) placeholder.classList.remove('d-none');
            if (removeBtn) removeBtn.classList.add('d-none');
            if (changeBtn) changeBtn.classList.add('d-none');
            if (removeHidden) removeHidden.value = '1';
        }

        box.addEventListener('click', function (e) {
            if (e.target.closest('#offer-card-rm-' + i) || e.target.closest('#offer-card-ch-' + i)) return;
            if (imgEl && !imgEl.classList.contains('d-none')) return;
            fileInput.click();
        });
        if (changeBtn) changeBtn.addEventListener('click', function (e) { e.stopPropagation(); fileInput.click(); });
        if (removeBtn) removeBtn.addEventListener('click', function (e) { e.stopPropagation(); clearImage(); });

        fileInput.addEventListener('change', function () {
            if (!this.files || !this.files[0]) return;
            var file = this.files[0];
            if (!file.type || !file.type.startsWith('image/')) return;
            if (removeHidden) removeHidden.value = '0';
            var reader = new FileReader();
            reader.onload = function (ev) { showImage(ev.target.result); };
            reader.readAsDataURL(file);
        });
    }
    for (var oi = 0; oi < 3; oi++) bindOfferSlot(oi);
})();

// ── Homepage sections manager ────────────────────────────────────────────
(function () {
    var hidden   = document.getElementById('sf-sections-json');
    var list     = document.getElementById('sf-sections-list');
    var addBtn   = document.getElementById('sf-add-section-btn');
    if (!hidden || !list) return;

    var formEl    = document.getElementById('storefront-settings-form');
    var searchUrl = formEl ? (formEl.getAttribute('data-filter-search-url') || '') : '';
    var branchId  = formEl ? (formEl.getAttribute('data-branch-id') || '') : '';
    var timers      = {};
    var openIdx     = null;
    var dragSrcIdx  = null;

    var state = [];
    try { state = JSON.parse(hidden.value || '[]'); } catch (_) {}
    if (!Array.isArray(state)) state = [];

    function save() { hidden.value = JSON.stringify(state); }

    // ── Render ────────────────────────────────────────────────────────────
    function render() {
        list.innerHTML = '';
        state.forEach(function (sec, idx) { list.appendChild(buildRow(sec, idx)); });
    }

    function buildRow(sec, idx) {
        var isDefault  = sec.type === 'featured' || sec.type === 'categories';
        var isOpen     = openIdx === idx;
        var filterType = sec.type === 'categories' ? 'category' : 'all';

        var row = document.createElement('div');
        row.className = 'sfl-row' + (isOpen ? ' is-editing' : '') + (sec.visible === false ? ' is-hidden-sec' : '');
        row.dataset.idx = String(idx);

        // ── Drag and drop ─────────────────────────────────────────────────
        row.setAttribute('draggable', 'true');
        row.addEventListener('dragstart', function (e) {
            dragSrcIdx = idx;
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', String(idx));
            setTimeout(function () { row.classList.add('is-dragging'); }, 0);
        });
        row.addEventListener('dragend', function () {
            row.classList.remove('is-dragging');
            list.querySelectorAll('.sfl-row').forEach(function (r) { r.classList.remove('drag-over'); });
            dragSrcIdx = null;
        });
        row.addEventListener('dragover', function (e) {
            e.preventDefault();
            if (dragSrcIdx === null || dragSrcIdx === idx) return;
            list.querySelectorAll('.sfl-row').forEach(function (r) { r.classList.remove('drag-over'); });
            row.classList.add('drag-over');
        });
        row.addEventListener('dragleave', function (e) {
            if (!row.contains(e.relatedTarget)) row.classList.remove('drag-over');
        });
        row.addEventListener('drop', function (e) {
            e.preventDefault();
            if (dragSrcIdx === null || dragSrcIdx === idx) return;
            var src = dragSrcIdx;
            var moved = state.splice(src, 1)[0];
            var dropIdx = src < idx ? idx - 1 : idx;
            state.splice(dropIdx, 0, moved);
            openIdx = null; dragSrcIdx = null;
            save(); render();
        });

        // ── Collapsed bar ────────────────────────────────────────────────
        var body = document.createElement('div');
        body.className = 'sfl-row__body';

        // Left group: drag + toggle + info (grid column 1)
        var leftGroup = document.createElement('div');
        leftGroup.className = 'sfl-row__body-left';

        // Drag handle
        var dragHandle = document.createElement('div');
        dragHandle.className = 'sfl-drag-handle';
        dragHandle.innerHTML = '<i class="bi bi-grip-vertical"></i>';
        leftGroup.appendChild(dragHandle);

        // Visibility toggle
        var togLabel = document.createElement('label');
        togLabel.className = 'sfl-toggle';
        togLabel.title = 'Show / hide on storefront';
        var tog = document.createElement('input');
        tog.type = 'checkbox'; tog.className = 'sfl-toggle__input';
        tog.checked = sec.visible !== false;
        var togSlider = document.createElement('span');
        togSlider.className = 'sfl-toggle__slider';
        togLabel.appendChild(tog);
        togLabel.appendChild(togSlider);
        tog.addEventListener('change', function (e) {
            e.stopPropagation();
            state[idx].visible = this.checked;
            row.classList.toggle('is-hidden-sec', !this.checked);
            save();
        });
        leftGroup.appendChild(togLabel);

        // Info block
        var info = document.createElement('div');
        info.className = 'sfl-info';

        var nameEl = document.createElement('span');
        nameEl.className = 'sfl-name';
        nameEl.textContent = sec.title || (sec.type === 'featured' ? 'Featured Products' : sec.type === 'categories' ? 'Shop by Category' : 'Custom Section');
        info.appendChild(nameEl);

        if (isDefault) {
            var tb = document.createElement('span');
            tb.className = (sec.type === 'featured' ? 'badge bg-purple-lt text-purple' : 'badge bg-teal-lt text-teal') + ' sfl-type-badge';
            tb.textContent = sec.type === 'featured' ? 'Featured' : 'Categories';
            info.appendChild(tb);
        }

        var filter = sec.filter || [];
        var showFilterPreview = !isOpen && filter.length > 0 && (sec.mode === 'custom' || sec.type === 'custom');
        var pill = document.createElement('span');
        pill.className = 'sfl-mode-pill';
        if (sec.type === 'custom' || sec.mode === 'custom') {
            if (!showFilterPreview) {
                pill.textContent = '• No filters yet';
                info.appendChild(pill);
            }
        } else {
            pill.textContent = sec.type === 'featured' ? '• All products' : '• All categories';
            info.appendChild(pill);
        }
        leftGroup.appendChild(info);
        body.appendChild(leftGroup);

        // Center chips block (grid column 2 — truly centered relative to full row)
        var centerChips = document.createElement('div');
        centerChips.className = 'sfl-filter-center';
        if (showFilterPreview) {
            filter.forEach(function (item) {
                var chip = document.createElement('span');
                chip.className = 'sfl-chip sfl-chip--preview';
                var b = document.createElement('span');
                b.className = 'sfl-chip__badge ' + (item.type === 'category' ? 'sfl-chip__badge--cat' : item.type === 'product' ? 'sfl-chip__badge--prod' : 'sfl-chip__badge--tag');
                b.textContent = item.type === 'category' ? 'CAT' : item.type === 'product' ? 'PROD' : 'TAG';
                chip.appendChild(b);
                chip.appendChild(document.createTextNode(' ' + (item.label || item.key || '')));
                centerChips.appendChild(chip);
            });
        }
        body.appendChild(centerChips);

        // ── Actions (right group) ─────────────────────────────────────────
        var acts = document.createElement('div');
        acts.className = 'sfl-actions';

        // Up / down reorder buttons
        var reorder = document.createElement('div');
        reorder.className = 'sfl-reorder';

        var upBtn = document.createElement('button');
        upBtn.type = 'button'; upBtn.className = 'sfl-btn-order';
        upBtn.title = 'Move up'; upBtn.disabled = idx === 0;
        upBtn.innerHTML = '<i class="bi bi-chevron-up"></i>';
        upBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (idx === 0) return;
            var t = state[idx]; state[idx] = state[idx - 1]; state[idx - 1] = t;
            if (openIdx === idx) openIdx = idx - 1;
            else if (openIdx === idx - 1) openIdx = idx;
            save(); render();
        });

        var dnBtn = document.createElement('button');
        dnBtn.type = 'button'; dnBtn.className = 'sfl-btn-order';
        dnBtn.title = 'Move down'; dnBtn.disabled = idx === state.length - 1;
        dnBtn.innerHTML = '<i class="bi bi-chevron-down"></i>';
        dnBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (idx >= state.length - 1) return;
            var t = state[idx]; state[idx] = state[idx + 1]; state[idx + 1] = t;
            if (openIdx === idx) openIdx = idx + 1;
            else if (openIdx === idx + 1) openIdx = idx;
            save(); render();
        });

        reorder.appendChild(upBtn);
        reorder.appendChild(dnBtn);
        acts.appendChild(reorder);

        // Divider
        var actDiv = document.createElement('div');
        actDiv.className = 'sfl-act-divider';
        acts.appendChild(actDiv);

        if (!isOpen) {
            // Edit button – collapsed state only
            var editBtn = document.createElement('button');
            editBtn.type = 'button';
            editBtn.className = 'sfl-btn-edit';
            editBtn.innerHTML = '<i class="bi bi-pencil"></i>Edit';
            editBtn.addEventListener('click', function (e) {
                e.stopPropagation();
                openIdx = idx;
                save(); render();
            });
            acts.appendChild(editBtn);

            // Delete button – collapsed state only, custom sections
            if (!isDefault) {
                var rmBtn = document.createElement('button');
                rmBtn.type = 'button'; rmBtn.className = 'sfl-btn-delete'; rmBtn.title = 'Remove section';
                rmBtn.innerHTML = '<i class="bi bi-trash3"></i>';
                rmBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    state.splice(idx, 1);
                    if (openIdx === idx) openIdx = null;
                    else if (openIdx !== null && openIdx > idx) openIdx--;
                    save(); render();
                });
                acts.appendChild(rmBtn);
            }
        }

        body.appendChild(acts);
        row.appendChild(body);

        // Filter chips only in .sfl-filter-center (collapsed bar) — no second row below

        // ── Expanded panel ────────────────────────────────────────────────
        if (isOpen) {
            var panel = document.createElement('div');
            panel.className = 'sfl-panel';

            // Title + Mode row
            var gr = document.createElement('div');
            gr.className = 'row g-3';

            var tc = document.createElement('div');
            tc.className = isDefault ? 'col-sm-6' : 'col-12';
            var tl = document.createElement('label');
            tl.className = 'form-label fw-semibold small mb-1';
            tl.textContent = 'Section title';
            var ti = document.createElement('input');
            ti.type = 'text'; ti.className = 'form-control form-control-sm';
            ti.value = sec.title || '';
            ti.placeholder = sec.type === 'featured' ? 'Featured Products' : sec.type === 'categories' ? 'Shop by Category' : 'e.g. Summer Deals';
            ti.addEventListener('input', function () {
                state[idx].title = this.value;
                var ns = row.querySelector('.sfl-name');
                if (ns) ns.textContent = this.value || ti.placeholder;
                save();
            });
            tc.appendChild(tl); tc.appendChild(ti);
            gr.appendChild(tc);

            var modeSelect = null;
            if (isDefault) {
                var mc = document.createElement('div');
                mc.className = 'col-sm-5';
                var ml = document.createElement('label');
                ml.className = 'form-label fw-semibold small mb-1';
                ml.textContent = 'Display';
                modeSelect = document.createElement('select');
                modeSelect.className = 'form-select form-select-sm';
                var o1 = document.createElement('option'); o1.value = 'all';
                o1.textContent = sec.type === 'featured' ? 'All products' : 'All categories';
                var o2 = document.createElement('option'); o2.value = 'custom';
                o2.textContent = 'Custom selection';
                modeSelect.appendChild(o1); modeSelect.appendChild(o2);
                modeSelect.value = sec.mode || 'all';
                modeSelect.addEventListener('change', function () {
                    state[idx].mode = this.value;
                    save();
                    fa.style.display = this.value === 'custom' ? '' : 'none';
                    var p2 = row.querySelector('.sfl-mode-pill');
                    if (p2) {
                        p2.textContent = this.value === 'custom'
                            ? ((state[idx].filter || []).length ? '• ' + (state[idx].filter || []).length + ' filter(s)' : '• No filters yet')
                            : (sec.type === 'featured' ? '• All products' : '• All categories');
                    }
                });
                mc.appendChild(ml); mc.appendChild(modeSelect);
                gr.appendChild(mc);
            }

            panel.appendChild(gr);

            // Limit row (max products in this section)
            var limitRow = document.createElement('div');
            limitRow.className = 'row g-3 mt-1';
            var limitCol = document.createElement('div');
            limitCol.className = 'col-sm-6';
            var limitLbl = document.createElement('label');
            limitLbl.className = 'form-label fw-semibold small mb-1';
            limitLbl.textContent = 'Max products on home';
            var limitSel = document.createElement('select');
            limitSel.className = 'form-select form-select-sm';
            [
                { v: 'all', t: 'All' },
                { v: '10', t: '10' },
                { v: '15', t: '15' },
                { v: '20', t: '20' },
                { v: '30', t: '30' },
                { v: '50', t: '50' },
                { v: '100', t: '100' }
            ].forEach(function (o) {
                var op = document.createElement('option');
                op.value = o.v;
                op.textContent = o.t;
                limitSel.appendChild(op);
            });
            var curLim = (sec.limit == null || sec.limit === '' || sec.limit === 'all') ? 'all' : String(sec.limit);
            limitSel.value = curLim;
            limitSel.addEventListener('change', function () {
                state[idx].limit = this.value === 'all' ? null : parseInt(this.value, 10);
                save();
            });
            limitCol.appendChild(limitLbl);
            limitCol.appendChild(limitSel);
            limitRow.appendChild(limitCol);
            panel.appendChild(limitRow);

            // Filter area
            var showFa = sec.type === 'custom' || sec.mode === 'custom';
            var fa = document.createElement('div');
            fa.className = 'mt-3';
            fa.style.display = showFa ? '' : 'none';

            var fl = document.createElement('label');
            fl.className = 'form-label fw-semibold small mb-1';
            fl.textContent = filterType === 'category' ? 'Show specific categories' : 'Filter by categories, tags & products';
            fa.appendChild(fl);

            var hw = document.createElement('div'); hw.className = 'position-relative';
            var fi = document.createElement('input');
            fi.type = 'text'; fi.className = 'form-control form-control-sm';
            fi.setAttribute('autocomplete', 'off');
            fi.placeholder = filterType === 'category' ? 'Search categories...' : 'Search categories, tags & products...';
            var dd = document.createElement('div');
            dd.className = 'pf-tag-dropdown d-none';
            dd.style.cssText = 'position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:1060;';
            hw.appendChild(fi); hw.appendChild(dd);
            fa.appendChild(hw);

            var chips = document.createElement('div');
            chips.className = 'sfl-chips mt-2';
            renderChips(chips, sec.filter || [], idx);
            fa.appendChild(chips);

            var hint = document.createElement('p');
            hint.className = 'text-muted mb-0 mt-2';
            hint.style.fontSize = '.72rem';
            hint.textContent = filterType === 'category'
                ? 'Only selected categories will appear in the section.'
                : 'Products matching any selected category, tag, or pinned individually will appear.';
            fa.appendChild(hint);

            panel.appendChild(fa);
            bindSearch(fi, dd, chips, idx, filterType);

            // Footer – left-aligned: Delete (custom only) + Done
            var foot = document.createElement('div');
            foot.className = 'sfl-panel__footer mt-3 pt-3';

            if (!isDefault) {
                var panelRmBtn = document.createElement('button');
                panelRmBtn.type = 'button'; panelRmBtn.className = 'sfl-panel-btn-delete';
                panelRmBtn.innerHTML = '<i class="bi bi-trash3"></i>Delete section';
                panelRmBtn.addEventListener('click', function () {
                    state.splice(idx, 1);
                    openIdx = null;
                    save(); render();
                });
                foot.appendChild(panelRmBtn);
            }

            var doneBtn = document.createElement('button');
            doneBtn.type = 'button'; doneBtn.className = 'sfl-btn-edit is-open';
            doneBtn.innerHTML = '<i class="bi bi-check2"></i>Done';
            doneBtn.addEventListener('click', function () { openIdx = null; save(); render(); });
            foot.appendChild(doneBtn);
            panel.appendChild(foot);
            row.appendChild(panel);

            setTimeout(function () { ti.focus(); }, 40);
        }

        return row;
    }

    function renderChips(container, filter, secIdx) {
        container.innerHTML = '';
        if (!filter.length) {
            var hint = document.createElement('span');
            hint.className = 'text-muted'; hint.style.fontSize = '.78rem';
            hint.textContent = 'Search above to add filters.';
            container.appendChild(hint);
            return;
        }
        filter.forEach(function (item, ii) {
            var chip = document.createElement('span');
            chip.className = 'sfl-chip';
            var b = document.createElement('span');
            b.className = 'sfl-chip__badge ' + (item.type === 'category' ? 'sfl-chip__badge--cat' : item.type === 'product' ? 'sfl-chip__badge--prod' : 'sfl-chip__badge--tag');
            b.textContent = item.type === 'category' ? 'CAT' : item.type === 'product' ? 'PROD' : 'TAG';
            chip.appendChild(b);
            chip.appendChild(document.createTextNode(' ' + (item.label || item.key || '')));
            var x = document.createElement('button');
            x.type = 'button'; x.className = 'sfl-chip__remove'; x.innerHTML = '&times;';
            (function (si, i) {
                x.addEventListener('click', function () {
                    state[si].filter.splice(i, 1); save(); render();
                });
            })(secIdx, ii);
            chip.appendChild(x);
            container.appendChild(chip);
        });
    }

    function bindSearch(input, dropdown, chips, secIdx, filterType) {
        function fetch_(q, cb) {
            if (!searchUrl) return cb([]);
            var url = searchUrl + '?q=' + encodeURIComponent(q) + '&filter_type=' + filterType;
            if (branchId) {
                url += '&branch_id=' + encodeURIComponent(branchId);
            }
            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' } })
                .then(function (r) { return r.ok ? r.json() : []; })
                .then(function (d) { cb(Array.isArray(d) ? d : []); })
                .catch(function () { cb([]); });
        }
        function showDrop(items) {
            dropdown.innerHTML = '';
            if (!items.length) { dropdown.classList.add('d-none'); return; }
            items.forEach(function (item) {
                var el = document.createElement('div'); el.className = 'pf-tag-item';
                var b = document.createElement('span');
                b.className = item.type === 'category' ? 'badge bg-blue-lt text-blue me-1' : item.type === 'product' ? 'badge bg-orange-lt text-orange me-1' : 'badge bg-teal-lt text-teal me-1';
                b.textContent = item.type === 'category' ? 'Category' : item.type === 'product' ? 'Product' : 'Tag';
                el.appendChild(b);
                el.appendChild(document.createTextNode(item.label || item.key));
                el.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                    var cur = state[secIdx].filter || [];
                    var dup = cur.some(function (f) {
                        return f.type === item.type && (f.type === 'category' ? f.id === item.id : f.key === item.key);
                    });
                    if (!dup) { if (!state[secIdx].filter) state[secIdx].filter = []; state[secIdx].filter.push(item); save(); render(); }
                    dropdown.classList.add('d-none'); input.value = '';
                });
                dropdown.appendChild(el);
            });
            dropdown.classList.remove('d-none');
        }
        input.addEventListener('input', function () {
            clearTimeout(timers[secIdx]);
            var q = this.value.trim();
            timers[secIdx] = setTimeout(function () { fetch_(q, showDrop); }, 220);
        });
        input.addEventListener('focus', function () { fetch_(this.value.trim(), showDrop); });
        input.addEventListener('blur', function () { setTimeout(function () { dropdown.classList.add('d-none'); }, 180); });
    }

    // Add section button — immediately creates + opens in edit mode
    if (addBtn) {
        addBtn.addEventListener('click', function () {
            state.push({ id: 'custom-' + Math.random().toString(36).substr(2, 8), type: 'custom', title: '', visible: true, mode: 'custom', filter: [] });
            openIdx = state.length - 1;
            save(); render();
            setTimeout(function () {
                var rows = list.querySelectorAll('.sfl-row');
                if (rows.length) rows[rows.length - 1].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 60);
        });
    }

    render();
})();

(function () {
    var hash = window.location.hash.replace(/^#/, '');
    if (!hash || !window.bootstrap || !bootstrap.Tab) return;
    var tabLink = document.querySelector('#tabs-sf-settings [href="#' + hash + '"]');
    if (!tabLink) return;
    try {
        bootstrap.Tab.getOrCreateInstance(tabLink).show();
        window.history.replaceState(null, '', window.location.pathname + window.location.search + '#' + hash);
    } catch (e) { /* noop */ }
})();

document.querySelectorAll('.sf-theme-radio--sf').forEach(function (radio) {
    radio.addEventListener('change', function () {
        var picker = this.closest('.sf-theme-picker');
        if (!picker) return;
        picker.querySelectorAll('.sf-theme-card').forEach(function (card) {
            card.classList.remove('is-selected');
            var badge = card.querySelector('.badge.bg-success-lt');
            if (badge) badge.remove();
        });
        var selected = this.closest('.sf-theme-card');
        if (selected) {
            selected.classList.add('is-selected');
            var meta = selected.querySelector('.sf-theme-card__meta .d-flex');
            if (meta && !meta.querySelector('.badge')) {
                var b = document.createElement('span');
                b.className = 'badge bg-success-lt text-success ms-auto';
                b.textContent = 'Active';
                meta.appendChild(b);
            }
        }
    });
});

(function () {
    var toggle = document.querySelector('.sf-branch-toggle');
    var drop = document.getElementById('sf-branch-dropdown');
    var icon = document.getElementById('sf-branch-icon');
    if (!toggle || !drop) return;

    function closeDrop() {
        drop.style.display = 'none';
        if (icon) icon.className = 'bi bi-chevron-down';
    }
    function openDrop() {
        drop.style.display = 'block';
        if (icon) icon.className = 'bi bi-chevron-up';
    }

    toggle.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (drop.style.display === 'block') {
            closeDrop();
        } else {
            openDrop();
        }
    });

    drop.querySelectorAll('.sf-branch-opt').forEach(function (opt) {
        opt.addEventListener('click', function () {
            var url = this.dataset.url;
            if (url) window.location.href = url;
        });
    });

    document.addEventListener('click', function (e) {
        if (!e.target.closest('#sf-branch-dropdown') && !e.target.closest('.sf-branch-toggle')) {
            closeDrop();
        }
    });
})();
</script>
@endsection