@extends('profile.layout')
@section('title', __('Yeni səhifə yarat'))

@php
$pageTypes = [
    ['id' => 'default',    'icon' => 'link',         'title' => 'Bio-link',   'desc' => 'Instagram bio üçün link səhifəsi',             'accent' => 'bg-primarysoft text-primary'],
    ['id' => 'mini_site',  'icon' => 'smartphone',   'title' => 'Mini-səhifə','desc' => 'Hazır şablonla mini sayt',                     'accent' => 'bg-purplesoft text-purple'],
    ['id' => 'menu',       'icon' => 'utensils',     'title' => 'QR-Menyu',   'desc' => 'Restoran və kafe üçün rəqəmsal menyu',          'accent' => 'bg-warningsoft text-warning'],
    ['id' => 'shop',       'icon' => 'shopping-bag', 'title' => 'Mağaza',     'desc' => 'Məhsul vitrini və səbət',                       'accent' => 'bg-successsoft text-success'],
];
@endphp

@section('content')
<div class="p-4 pb-28 mx-auto max-w-6xl">
    <h1 class="text-2xl font-bold text-ink">{{ __('Yeni səhifə yarat') }}</h1>
    <p class="text-sm text-muted mt-1">{{ __('Bir neçə addımda hazır səhifənizi yaradın') }}</p>

    {{-- Steps (desktop) --}}
    <div class="hidden md:flex items-center mt-6 mb-8">
        @foreach([__('Səhifə növü'), __('Dizayn'), __('Tənzimləmələr')] as $i => $label)
            <div class="flex items-center {{ $i < 2 ? 'flex-1' : '' }}">
                <div class="flex items-center gap-2.5 shrink-0">
                    <div id="stepDot{{ $i }}" class="w-9 h-9 rounded-full flex items-center justify-center text-sm font-semibold transition-colors {{ $i === 0 ? 'bg-primary text-white' : 'bg-surface2 text-muted' }}">
                        <span id="stepNum{{ $i }}">{{ $i + 1 }}</span>
                        <x-icon name="check" class="w-4 h-4 hidden" />
                    </div>
                    <span id="stepLabel{{ $i }}" class="text-sm font-medium {{ $i === 0 ? 'text-ink' : 'text-muted' }}">{{ $label }}</span>
                </div>
                @if($i < 2)<div id="stepLine{{ $i }}" class="h-0.5 flex-1 rounded bg-surface2 mx-3"></div>@endif
            </div>
        @endforeach
    </div>

    {{-- Steps (mobile progress) --}}
    <div class="md:hidden flex items-center gap-3 mt-4 mb-6">
        <div class="flex-1 h-1.5 rounded-full bg-surface2 overflow-hidden">
            <div id="mobileStepBar" class="h-full rounded-full bg-primary transition-all" style="width:33.3%"></div>
        </div>
        <span id="mobileStepHint" class="text-xs font-medium text-muted shrink-0">Addım 1 / 3</span>
    </div>

    {{-- STEP 1: Type --}}
    <div id="step1">
        <h3 class="font-semibold text-ink mb-4">{{ __('Səhifə növünü seçin') }}</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            @foreach($pageTypes as $type)
                @if(in_array($type['id'], $allowedPageTypes))
                <button type="button" onclick="selectType('{{ $type['id'] }}')" class="wizard-type-card {{ $preselectedType === $type['id'] ? 'selected' : '' }}" data-type="{{ $type['id'] }}">
                    <span class="wizard-check"><x-icon name="check" class="w-4 h-4" /></span>
                    <span class="wizard-type-icon {{ $type['accent'] }}"><x-icon :name="$type['icon']" class="w-8 h-8" /></span>
                    <span class="text-lg font-semibold text-ink">{{ $type['title'] }}</span>
                    <span class="text-xs text-muted leading-relaxed">{{ $type['desc'] }}</span>
                </button>
                @else
                <div class="wizard-type-card locked">
                    <span class="wizard-type-icon"><x-icon name="lock" class="w-7 h-7" /></span>
                    <span class="text-lg font-semibold text-muted">{{ $type['title'] }}</span>
                    <span class="text-xs text-muted">{{ $profileUser->pageTypePlanName($type['id']) ?? __('Premium') }} {{ __('tarifində') }}</span>
                </div>
                @endif
            @endforeach
        </div>
    </div>

    {{-- STEP 2: Template --}}
    <div id="step2" style="display:none;">
        <div class="flex items-center justify-between mb-3">
            <h3 class="font-semibold text-ink">{{ __('Dizayn seçin') }}</h3>
            <span id="tplCount" class="text-xs text-muted"></span>
        </div>

        {{-- Filters --}}
        <div class="wizard-filterbar">
            <div class="flex items-center gap-3 flex-wrap">
                <div class="relative flex-1 min-w-[180px]">
                    <x-icon name="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted pointer-events-none" />
                    <input id="tagSearch" type="text" oninput="applyFilters()" placeholder="{{ __('Axtar...') }}" class="input !pl-9">
                </div>
                <button type="button" onclick="resetFilters()" id="resetFilters" class="wizard-chip" style="display:none;">
                    <x-icon name="x" class="w-4 h-4" /> {{ __('Sıfırla') }}
                </button>
            </div>

            <div class="flex items-center gap-3 mt-3">
                <span class="wizard-filter-label"><x-icon name="tag" class="w-3.5 h-3.5" /> {{ __('Kateqoriyalar') }}</span>
                <div class="flex gap-2 overflow-x-auto pb-1 flex-1">
                    <button type="button" onclick="filterByCategory('all')" class="wizard-chip active" data-cat="all">{{ __('Hamısı') }}</button>
                    @foreach($templates->pluck('category')->filter()->unique()->sort()->values() as $cat)
                        <button type="button" onclick="filterByCategory('{{ $cat }}')" class="wizard-chip" data-cat="{{ $cat }}" data-types="{{ $templates->where('category', $cat)->pluck('target_page_type')->unique()->join(',') }}">{{ $cat }}</button>
                    @endforeach
                </div>
            </div>

            <div class="flex items-center gap-3 mt-3">
                <span class="wizard-filter-label"><x-icon name="palette" class="w-3.5 h-3.5" /> {{ __('Rənglər') }}</span>
                <div class="flex gap-2.5 overflow-x-auto pb-1 flex-1 items-center">
                    @foreach(['tünd'=>'#0f172a','açıq'=>'#f1f5f9','göy'=>'#3b82f6','yaşıl'=>'#22c55e','qırmızı'=>'#ef4444','sarı'=>'#eab308','bənövşəyi'=>'#8b5cf6','narıncı'=>'#f97316'] as $color => $hex)
                        <button type="button" onclick="toggleColor('{{ $color }}')" class="wizard-color" data-color="{{ $color }}" title="{{ $color }}" style="background:{{ $hex }}"></button>
                    @endforeach
                </div>
            </div>
        </div>

        <div id="tplError" class="mb-4 p-3 bg-dangersoft border border-line rounded-xl text-sm text-danger" style="display:none;">{{ __('Şablon seçin') }}</div>

        {{-- Templates grid --}}
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($templates as $tpl)
                @php $isLocked = $tpl->plan_id && $userPlanId && (int) $tpl->plan_id !== (int) $userPlanId; @endphp
                <div class="wizard-tpl-card" data-type="{{ $tpl->target_page_type }}" data-cat="{{ $tpl->category ?? '' }}" data-id="{{ $tpl->id }}" data-locked="{{ $isLocked ? '1' : '' }}" data-plan="{{ $tpl->plan->name ?? __('Premium') }}" onclick="selectTemplate({{ $tpl->id }}, '{{ $tpl->name }}')">
                    <div class="wizard-tpl-thumb">
                        @if($tpl->thumbnail)
                            <img src="{{ $tpl->thumbnail }}" class="w-full h-full object-cover" loading="lazy" alt="{{ $tpl->name }}">
                        @else
                            <div class="w-full h-full flex items-center justify-center"><x-icon name="file-text" class="w-8 h-8 text-muted" /></div>
                        @endif

                        @if($isLocked)
                            <div class="wizard-tpl-lock">
                                <x-icon name="lock" class="w-5 h-5" />
                                <span class="text-sm font-semibold">{{ $tpl->plan->name ?? __('Premium') }}</span>
                            </div>
                        @else
                            <div class="wizard-tpl-overlay">
                                <button type="button" onclick="event.stopPropagation(); showTplDetail({{ $tpl->id }})" class="w-11 h-11 rounded-full bg-white text-ink flex items-center justify-center shadow-lg hover:scale-105 transition-transform" title="{{ __('Önizləmə') }}"><x-icon name="eye" class="w-5 h-5" /></button>
                                <button type="button" onclick="event.stopPropagation(); selectTemplate({{ $tpl->id }}, '{{ $tpl->name }}')" class="btn btn-primary"><x-icon name="check" class="w-4 h-4" /> {{ __('Seç') }}</button>
                            </div>
                        @endif

                        <span class="wizard-check absolute top-2.5 left-2.5 z-20"><x-icon name="check" class="w-4 h-4" /></span>
                    </div>

                    <div class="wizard-tpl-info">
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-sm font-medium text-ink truncate">{{ $tpl->name }}</span>
                            <span class="text-[10px] font-medium text-muted bg-surface2 px-2 py-0.5 rounded-full shrink-0">{{ $tpl->plan->name ?? __('Hamısı') }}</span>
                        </div>
                        <div class="mt-1.5 flex items-center gap-1.5">
                            <span class="text-[11px] text-primary bg-primarysoft px-2 py-0.5 rounded-full">{{ $tpl->category ?? 'Ümumi' }}</span>
                        </div>
                    </div>
                </div>
            @endforeach

            {{-- Empty state --}}
            <div class="wizard-empty" id="tplEmpty" style="display:none;">
                <div class="w-16 h-16 rounded-full bg-surface2 flex items-center justify-center"><x-icon name="search" class="w-7 h-7 text-muted" /></div>
                <p class="font-semibold text-ink">{{ __('Nəticə tapılmadı') }}</p>
                <p class="text-sm text-muted max-w-sm">{{ __('Filtrlərə uyğun şablon tapılmadı') }}</p>
                <button type="button" onclick="resetFilters()" class="btn btn-secondary mt-1"><x-icon name="x" class="w-4 h-4" /> {{ __('Filtrləri sıfırla') }}</button>
            </div>
        </div>
    </div>

    {{-- STEP 3: Settings --}}
    <div id="step3" style="display:none;">
        <h3 class="font-semibold text-ink mb-4">{{ __('Tənzimləmələr') }}</h3>
        <form method="POST" action="{{ route('pages.store', $profileUser) }}" id="finalForm" class="space-y-4 max-w-2xl" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="type" id="formType" value="{{ $preselectedType }}">
            <input type="hidden" name="template_id" id="formTemplateId" value="">
            <div id="formError" class="mb-4 p-3 bg-dangersoft border border-line rounded-xl text-sm text-danger" style="display:none;"></div>

            <div class="card space-y-4">
                <div>
                    <label class="label">{{ __('Səhifə başlığı') }}</label>
                    <input type="text" name="title" id="titleInput" oninput="autoSlug()" class="input" placeholder="Mənim səhifəm" required>
                    <p id="err-title" class="field-error text-xs text-danger mt-1" style="display:none;"></p>
                </div>
                <div>
                    <label class="label">{{ __('Ünvan (slug)') }}</label>
                    <div class="flex items-center">
                        <span class="px-3 py-2.5 bg-surface2 border border-r-0 border-line rounded-l-lg text-sm text-muted">libro.az/</span>
                        <input type="text" name="slug" id="slugInput" class="input !rounded-l-none" placeholder="username" pattern="[a-z0-9-]+">
                    </div>
                    <p id="err-slug" class="field-error text-xs text-danger mt-1" style="display:none;"></p>
                </div>
            </div>

            @if($canUseSeo)
            <div class="card space-y-4">
                <h4 class="font-semibold text-ink flex items-center gap-1.5"><x-icon name="search" class="w-4 h-4" /> {{ __('SEO') }}</h4>
                <div>
                    <label class="label">{{ __('Meta başlıq') }}</label>
                    <input type="text" name="meta_title" class="input" placeholder="60-70 simvol" maxlength="70">
                </div>
                <div>
                    <label class="label">{{ __('Meta təsvir') }}</label>
                    <textarea name="meta_description" class="input min-h-[60px]" placeholder="150-160 simvol" maxlength="160"></textarea>
                </div>
                <div>
                    <label class="label">{{ __('OG şəkli') }}</label>
                    <input type="file" name="og_image" id="ogImageInput" accept="image/*" class="input" onchange="previewOgImage(this)">
                    <div id="ogImagePreview" style="display:none;" class="mt-2"><img id="ogImageImg" src="" alt="OG" class="w-24 h-24 object-cover rounded-lg border"></div>
                    <p id="err-og_image" class="field-error text-xs text-danger mt-1" style="display:none;"></p>
                </div>
            </div>
            @endif

            {{-- Footer (inside form so submit works) --}}
            <div class="wizard-footer">
                <div class="wizard-footer-inner">
                    <button type="button" onclick="prevStep()" class="btn btn-secondary px-6 py-3"><x-icon name="arrow-left" class="w-4 h-4" /> {{ __('Geri') }}</button>
                    <button type="submit" class="btn btn-primary flex-1 py-3">{{ __('Səhifə yarat') }} <x-icon name="rocket" class="w-4 h-4" /></button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Step 1 & 2 footers --}}
<div id="step1Footer" class="wizard-footer">
    <div class="wizard-footer-inner">
        <button type="button" onclick="nextStep()" class="btn btn-primary flex-1 py-3">{{ __('Davam et') }} <x-icon name="chevron-right" class="w-4 h-4" /></button>
    </div>
</div>
<div id="step2Footer" class="wizard-footer" style="display:none;">
    <div class="wizard-footer-inner">
        <button type="button" onclick="prevStep()" class="btn btn-secondary px-6 py-3"><x-icon name="arrow-left" class="w-4 h-4" /> {{ __('Geri') }}</button>
        <button type="button" onclick="nextStep()" id="nextStepBtn" class="btn btn-primary flex-1 py-3 disabled:opacity-50 disabled:cursor-not-allowed" disabled>{{ __('Davam et') }} <x-icon name="chevron-right" class="w-4 h-4" /></button>
    </div>
</div>

{{-- Detail modal --}}
<div id="tplModal" class="modal-overlay" style="display:none;" onclick="closeTplModal()">
    <div class="bg-surface rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6 max-h-[85vh] overflow-y-auto relative" onclick="event.stopPropagation()">
        <button type="button" onclick="closeTplModal()" class="absolute top-3 right-3 text-muted hover:text-ink w-10 h-10 rounded-full flex items-center justify-center bg-surface2 hover:bg-line transition-colors"><x-icon name="x" class="w-5 h-5" /></button>

        <div class="flex justify-center px-6 py-4 h-72 overflow-auto">
            <div class="rounded-lg overflow-hidden shadow-lg">
                <img id="tplModalImg" src="" class="w-full h-auto object-cover" style="max-height:300px;object-fit:cover;">
            </div>
        </div>

        <span id="tplModalCat" class="absolute top-6 left-6 bg-primary/80 rounded-lg text-white text-xs px-2 py-1 font-medium"></span>
        <h3 class="font-bold text-lg text-ink text-center mt-2" id="tplModalTitle"></h3>
        <div id="tplModalDesc" class="text-sm text-muted mb-3 text-center"></div>

        <div class="flex flex-wrap gap-1.5 mb-4 justify-center" id="tplModalTags"></div>
        <button type="button" onclick="selectFromModal()" class="btn btn-primary w-full py-3">{{ __('Bu şablonu seç') }} <x-icon name="check" class="w-4 h-4" /></button>
    </div>
</div>

{{-- Locked template popup --}}
<div id="lockedModal" class="modal-overlay" style="display:none;" onclick="closeLockedModal()">
    <div class="bg-surface rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6 text-center" onclick="event.stopPropagation()">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primarysoft text-primary flex items-center justify-center"><x-icon name="lock" class="w-8 h-8" /></div>
        <h3 class="font-bold text-lg text-ink mb-2">{{ __('Premium şablon') }}</h3>
        <p class="text-sm text-muted mb-5">{{ __('Bu dizayn yalnız') }} <span id="lockedPlanName" class="font-semibold text-primary"></span> {{ __('tarifi abunəçiləri üçündür') }}</p>
        <button type="button" onclick="closeLockedModal()" class="btn btn-primary w-full py-2.5">{{ __('Bağla') }}</button>
    </div>
</div>
@endsection

@push('scripts')
<script>
let currentStep = 1,
    selectedType = '{{ $preselectedType }}',
    selectedCategory = 'all',
    selectedTemplateId = null,
    selectedColors = [];

const tplData = {!! $templatesJson !!};
const $ = (id) => document.getElementById(id);
const qa = (sel) => document.querySelectorAll(sel);

// === FILTERING ===
function setResetVisibility() {
    const search = ($('tagSearch')?.value || '').trim();
    const btn = $('resetFilters');
    if (btn) btn.style.display = (search.length > 0 || selectedCategory !== 'all' || selectedColors.length > 0) ? '' : 'none';
}

function applyFilters() {
    const search = ($('tagSearch')?.value || '').toLowerCase().trim();

    // Category chips — show only those relevant to the selected type
    qa('.wizard-chip[data-types]').forEach(b => {
        const types = (b.dataset.types || '').split(',');
        b.style.display = types.includes(selectedType) ? '' : 'none';
    });

    // Template cards
    let visible = 0;
    qa('.wizard-tpl-card').forEach(c => {
        const tpl = tplData[c.dataset.id] || {};
        const tags = (tpl.tags || []).join(' ').toLowerCase();
        const name = (tpl.name || '').toLowerCase();
        const typeMatch = (c.dataset.type || '') === selectedType;
        const catMatch = selectedCategory === 'all' || c.dataset.cat === selectedCategory;
        const searchMatch = !search || tags.includes(search) || name.includes(search);
        const colorMatch = selectedColors.length === 0 || (tpl.colors || []).some(col => selectedColors.includes(col));
        const show = typeMatch && catMatch && searchMatch && colorMatch;
        c.style.display = show ? '' : 'none';
        if (show) visible++;
    });

    const count = $('tplCount');
    if (count) count.textContent = visible > 0 ? visible + ' şablon' : '';

    const empty = $('tplEmpty');
    if (empty) empty.style.display = visible === 0 ? '' : 'none';

    setResetVisibility();
}

function selectType(type) {
    selectedType = type;
    selectedCategory = 'all';
    $('formType').value = type;
    selectedTemplateId = null;
    $('formTemplateId').value = '';

    qa('.wizard-tpl-card').forEach(c => c.classList.remove('selected'));
    const nextBtn = $('nextStepBtn');
    if (nextBtn) nextBtn.disabled = true;
    const err = $('tplError');
    if (err) err.style.display = 'none';

    qa('.wizard-type-card').forEach(c => c.classList.toggle('selected', c.dataset.type === type));
    qa('.wizard-chip').forEach(b => b.classList.toggle('active', b.dataset.cat === 'all'));
    applyFilters();
}

function toggleColor(color) {
    const i = selectedColors.indexOf(color);
    if (i >= 0) selectedColors.splice(i, 1); else selectedColors.push(color);
    qa('.wizard-color').forEach(b => b.classList.toggle('active', selectedColors.includes(b.dataset.color)));
    applyFilters();
}

function filterByCategory(cat) {
    selectedCategory = cat;
    qa('.wizard-chip').forEach(b => b.classList.toggle('active', b.dataset.cat === cat));
    applyFilters();
}

function resetFilters() {
    if ($('tagSearch')) $('tagSearch').value = '';
    selectedCategory = 'all';
    selectedColors = [];
    qa('.wizard-chip').forEach(b => b.classList.toggle('active', b.dataset.cat === 'all'));
    qa('.wizard-color').forEach(b => b.classList.remove('active'));
    applyFilters();
}

// === TEMPLATE SELECTION ===
function selectTemplate(id, name) {
    const card = document.querySelector(`.wizard-tpl-card[data-id="${id}"]`);
    const err = $('tplError');

    if (card && card.dataset.locked === '1') {
        const planName = card.dataset.plan || 'Premium';
        const nameEl = $('lockedPlanName');
        if (nameEl) nameEl.textContent = planName;
        const m = $('lockedModal');
        if (m) m.style.display = 'flex';
        return;
    }

    selectedTemplateId = id;
    $('formTemplateId').value = id || '';
    qa('.wizard-tpl-card').forEach(c => c.classList.toggle('selected', c.dataset.id == id));

    const btn = $('nextStepBtn');
    if (btn) btn.disabled = false;
    if (err) err.style.display = 'none';
}

// === DETAIL MODAL ===
let modalTplId = null;
function showTplDetail(id) {
    modalTplId = id;
    const t = tplData[id]; if (!t) return;
    $('tplModalTitle').textContent = t.name;
    const img = $('tplModalImg');
    img.src = t.thumbnail || '';
    img.style.display = t.thumbnail ? '' : 'none';
    $('tplModalDesc').textContent = t.description || '';
    $('tplModalCat').textContent = t.category || '';
    $('tplModalTags').innerHTML = (t.tags || []).map(tg => `<span class="text-[11px] bg-primarysoft text-primary px-2 py-0.5 rounded-full">${tg}</span>`).join('');
    $('tplModal').style.display = 'flex';
}
function closeTplModal() { $('tplModal').style.display = 'none'; modalTplId = null; }
function closeLockedModal() { $('lockedModal').style.display = 'none'; }
function selectFromModal() { if (modalTplId) { const t = tplData[modalTplId]; selectTemplate(modalTplId, t?.name || ''); } closeTplModal(); }

// === NAVIGATION ===
function nextStep() {
    if (currentStep === 2 && !selectedTemplateId) {
        const err = $('tplError');
        if (err) err.style.display = '';
        return;
    }
    const err = $('tplError');
    if (err) err.style.display = 'none';

    $('step' + currentStep).style.display = 'none';
    currentStep++;
    $('step' + currentStep).style.display = '';
    updateSteps();
    updateFooter();
    if (currentStep === 2) applyFilters();
}

function prevStep() {
    $('step' + currentStep).style.display = 'none';
    currentStep--;
    $('step' + currentStep).style.display = '';
    updateSteps();
    updateFooter();
}

function updateFooter() {
    // step1 → step1Footer; step2 → step2Footer; step3 → footer inside form (always visible when step3 shown)
    const f1 = $('step1Footer');
    const f2 = $('step2Footer');
    if (f1) f1.style.display = currentStep === 1 ? '' : 'none';
    if (f2) f2.style.display = currentStep === 2 ? '' : 'none';
}

function updateSteps() {
    for (let i = 0; i < 3; i++) {
        const dot = $('stepDot' + i);
        const num = $('stepNum' + i);
        const label = $('stepLabel' + i);
        const check = dot ? dot.querySelector('svg') : null;
        if (dot) dot.className = 'w-9 h-9 rounded-full flex items-center justify-center text-sm font-semibold transition-colors ' +
            (i < currentStep - 1 ? 'bg-primary text-white'
             : i === currentStep - 1 ? 'bg-primary text-white'
             : 'bg-surface2 text-muted');
        if (num) num.classList.toggle('hidden', i < currentStep - 1);
        if (check) check.classList.toggle('hidden', i >= currentStep - 1);
        if (label) label.className = 'text-sm font-medium ' + (i <= currentStep - 1 ? 'text-ink' : 'text-muted');
        if (i < 2) {
            const line = $('stepLine' + i);
            if (line) line.className = 'h-0.5 flex-1 rounded mx-3 ' + (i < currentStep - 1 ? 'bg-primary' : 'bg-surface2');
        }
    }
    const bar = $('mobileStepBar');
    if (bar) bar.style.width = (currentStep / 3 * 100) + '%';
    const hint = $('mobileStepHint');
    if (hint) hint.textContent = 'Addım ' + currentStep + ' / 3';
}

// === SLUG AUTO-FILL ===
const TRANSLIT = {
    'ə':'e','ğ':'g','ş':'s','ç':'c','ö':'o','ü':'u','ı':'i',
    'Ə':'e','Ğ':'g','Ş':'s','Ç':'c','Ö':'o','Ü':'u','İ':'i','I':'i',
    'а':'a','б':'b','в':'v','г':'g','д':'d','е':'e','ё':'e','ж':'zh','з':'z','и':'i','й':'y','к':'k','л':'l','м':'m','н':'n','о':'o','п':'p','р':'r','с':'s','т':'t','у':'u','ф':'f','х':'h','ц':'ts','ч':'ch','ш':'sh','щ':'sch','ъ':'','ы':'y','ь':'','э':'e','ю':'yu','я':'ya',
    'А':'a','Б':'b','В':'v','Г':'g','Д':'d','Е':'e','Ё':'e','Ж':'zh','З':'z','И':'i','Й':'y','К':'k','Л':'l','М':'m','Н':'n','О':'o','П':'p','Р':'r','С':'s','Т':'t','У':'u','Ф':'f','Х':'h','Ц':'ts','Ч':'ch','Ш':'sh','Щ':'sch','Ъ':'','Ы':'y','Ь':'','Э':'e','Ю':'yu','Я':'ya'
};
function slugify(str) {
    let out = '';
    for (const ch of String(str)) out += (ch in TRANSLIT) ? TRANSLIT[ch] : ch;
    return out.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
}
function autoSlug() {
    const title = $('titleInput');
    const slug = $('slugInput');
    if (title && slug) slug.value = slugify(title.value);
}
function previewOgImage(input) {
    const preview = $('ogImagePreview');
    const img = $('ogImageImg');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => { img.src = e.target.result; preview.style.display = ''; };
        reader.readAsDataURL(input.files[0]);
    } else {
        preview.style.display = 'none';
    }
}

// === AJAX FORM SUBMIT ===
$('finalForm').addEventListener('submit', async function (e) {
    e.preventDefault();
    qa('.field-error').forEach(el => { el.textContent = ''; el.style.display = 'none'; });
    const formError = $('formError');
    if (formError) formError.style.display = 'none';

    const form = this;
    const submitBtn = form.querySelector('button[type="submit"]');
    const btnHtml = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = 'Göndərilir...';

    try {
        const r = await fetch(form.action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            body: new FormData(form),
        });

        if (r.ok) {
            const data = await r.json();
            if (data.redirect) window.location.href = data.redirect;
            return;
        }

        if (r.status === 422) {
            const data = await r.json();
            const errors = data.errors || {};
            const unmatched = [];
            for (const [field, msgs] of Object.entries(errors)) {
                const el = $('err-' + field);
                if (el) { el.textContent = msgs.join(' '); el.style.display = ''; }
                else unmatched.push(msgs.join(' '));
            }
            if (unmatched.length && formError) { formError.textContent = unmatched.join(' '); formError.style.display = ''; }
            else if (data.message && formError) { formError.textContent = data.message; formError.style.display = ''; }
        } else {
            if (formError) { formError.textContent = 'Xəta baş verdi. Yenidən cəhd edin.'; formError.style.display = ''; }
        }
    } catch (err) {
        if (formError) { formError.textContent = 'Şəbəkə xətası.'; formError.style.display = ''; }
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = btnHtml;
    }
});

// === INIT ===
selectType(selectedType);
updateSteps();
updateFooter();
</script>
@endpush