@extends('layouts.dashboard')
@section('title', t('إدارة القالب','Theme Manager'))
@section('page-title','🎨 '.t('إدارة القالب والتصميم','Theme & Design Manager'))

@section('styles')
<style>
.tab-bar { display:flex; gap:4px; background:#f8fafc; border-radius:12px; padding:6px; margin-bottom:24px; flex-wrap:wrap; }
.tab-btn { flex:1; min-width:120px; padding:10px 16px; border:none; background:transparent; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; color:#64748b; transition:all .2s; text-align:center; }
.tab-btn.active { background:#fff; color:#2563eb; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.color-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #f1f5f9; }
.color-row:last-child { border:none; }
.color-preview { width:48px; height:48px; border-radius:10px; border:2px solid #e2e8f0; flex-shrink:0; cursor:pointer; }
.color-label { flex:1; }
.color-label strong { display:block; font-size:14px; margin-bottom:2px; }
.color-label span { font-size:12px; color:#94a3b8; }
.color-input { width:120px; }
.section-toggle { display:flex; align-items:center; justify-content:space-between; padding:16px; background:#f8fafc; border-radius:12px; margin-bottom:10px; }
.section-toggle-info { display:flex; align-items:center; gap:12px; }
.section-icon { font-size:24px; width:44px; text-align:center; }
.toggle-switch { position:relative; width:48px; height:26px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#e2e8f0; border-radius:999px; cursor:pointer; transition:.3s; }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.toggle-switch input:checked + .toggle-slider { background:#2563eb; }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(22px); }
.preview-hero { border-radius:14px; overflow:hidden; margin-top:16px; }
.font-preview { padding:20px; border:1.5px solid #e2e8f0; border-radius:10px; text-align:center; margin-top:8px; }
</style>
@endsection

@section('content')

{{-- Tab Bar --}}
<div class="tab-bar">
  <button class="tab-btn active" onclick="switchTab('colors')">🎨 {{ t('الألوان','Colors') }}</button>
  <button class="tab-btn" onclick="switchTab('hero')">🦸 {{ t('الـ Hero','Hero Section') }}</button>
  <button class="tab-btn" onclick="switchTab('sections')">📐 {{ t('الأقسام','Sections') }}</button>
  <button class="tab-btn" onclick="switchTab('typography')">🔤 {{ t('الخطوط','Typography') }}</button>
</div>

{{-- ═══ TAB: COLORS ═══ --}}
<div class="tab-panel active" id="tab-colors">
<form method="POST" action="{{ route('admin.theme.colors') }}">
@csrf
<div class="card">
  <div class="card-header">
    <h3>🎨 {{ t('ألوان الموقع','Site Colors') }}</h3>
    <button type="submit" class="btn btn-primary btn-sm">💾 {{ t('حفظ الألوان','Save Colors') }}</button>
  </div>
  <div style="padding:20px">

    @php
    $colors = [
      ['theme_primary',      t('اللون الرئيسي','Primary Color'),         t('يُستخدم في الأزرار والروابط والعناصر الرئيسية','Used in buttons, links and main elements')],
      ['theme_primary_dark', t('اللون الرئيسي الداكن','Primary Dark'),   t('لحالات الـ hover','For hover states')],
      ['theme_accent',       t('اللون المميز (Accent)','Accent Color'),  t('للعناصر الثانوية والتأثيرات','For secondary elements and effects')],
      ['theme_success',      t('لون النجاح','Success Color'),            t('للرسائل والشارات الإيجابية','For positive messages and badges')],
      ['theme_danger',       t('لون الخطأ','Danger Color'),              t('للرسائل والتحذيرات','For errors and warnings')],
    ];
    @endphp

    @foreach($colors as [$key, $label, $desc])
    <div class="color-row">
      <input type="color" name="{{ $key }}" value="{{ $s[$key] ?? '#2563eb' }}"
             class="color-preview" id="cp-{{ $key }}"
             oninput="document.getElementById('ct-{{ $key }}').value=this.value;document.getElementById('cp-{{ $key }}').style.background=this.value">
      <div class="color-label">
        <strong>{{ $label }}</strong>
        <span>{{ $desc }}</span>
      </div>
      <input type="text" id="ct-{{ $key }}" value="{{ $s[$key] ?? '#2563eb' }}" class="form-input color-input"
             oninput="if(this.value.match(/^#[0-9a-f]{6}$/i)){document.getElementById('cp-{{ $key }}').value=this.value;}">
    </div>
    @endforeach

    {{-- Live Preview --}}
    <div style="margin-top:24px;padding:20px;background:#f8fafc;border-radius:12px">
      <div style="font-size:13px;font-weight:700;margin-bottom:12px">👁️ {{ t('معاينة مباشرة','Live Preview') }}</div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <button id="prev-btn" style="padding:10px 20px;background:var(--prev-primary,#2563eb);color:#fff;border:none;border-radius:9px;font-weight:700;cursor:default">
          {{ t('زر رئيسي','Primary Button') }}
        </button>
        <button id="prev-btn2" style="padding:10px 20px;background:var(--prev-accent,#7c3aed);color:#fff;border:none;border-radius:9px;font-weight:700;cursor:default">
          {{ t('زر Accent','Accent Button') }}
        </button>
        <span id="prev-badge" style="padding:6px 14px;background:var(--prev-success-bg,#dcfce7);color:var(--prev-success,#16a34a);border-radius:999px;font-size:12px;font-weight:700">
          ✅ {{ t('شارة نجاح','Success Badge') }}
        </span>
        <span id="prev-badge2" style="padding:6px 14px;background:#fef2f2;color:var(--prev-danger,#dc2626);border-radius:999px;font-size:12px;font-weight:700">
          ❌ {{ t('شارة خطأ','Error Badge') }}
        </span>
      </div>
    </div>
  </div>
</div>
</form>
</div>

{{-- ═══ TAB: HERO ═══ --}}
<div class="tab-panel" id="tab-hero">
<form method="POST" action="{{ route('admin.theme.hero') }}">
@csrf
<div class="card">
  <div class="card-header">
    <h3>🦸 {{ t('قسم الـ Hero الرئيسي','Main Hero Section') }}</h3>
    <button type="submit" class="btn btn-primary btn-sm">💾 {{ t('حفظ','Save') }}</button>
  </div>
  <div style="padding:20px">

    {{-- Enable toggle --}}
    <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between">
      <div><strong>{{ t('تفعيل قسم Hero','Enable Hero Section') }}</strong></div>
      <label class="toggle-switch">
        <input type="checkbox" name="hero_enabled" value="1" {{ ($s['hero_enabled']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
    </div>

    {{-- Background --}}
    <div style="font-weight:700;font-size:14px;margin-bottom:12px;color:#334155">🎨 {{ t('خلفية الـ Hero','Hero Background') }}</div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px">
      @foreach([['hero_bg_from','من (From)','#0f172a'],['hero_bg_mid','وسط (Mid)','#1e3a8a'],['hero_bg_to','إلى (To)','#2563eb']] as [$k,$l,$d])
      <div>
        <label class="form-label">{{ $l }}</label>
        <div style="display:flex;gap:6px">
          <input type="color" name="{{ $k }}" value="{{ $s[$k]??$d }}" style="width:48px;height:38px;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer">
          <input type="text" value="{{ $s[$k]??$d }}" class="form-input" style="font-size:13px" oninput="document.querySelector('[name={{ $k }}]').value=this.value;updateHeroPreview()">
        </div>
      </div>
      @endforeach
    </div>

    {{-- Preview --}}
    <div id="hero-preview" class="preview-hero" style="background:linear-gradient(135deg,{{ $s['hero_bg_from']??'#0f172a' }},{{ $s['hero_bg_mid']??'#1e3a8a' }},{{ $s['hero_bg_to']??'#2563eb' }});padding:32px;color:#fff;text-align:center">
      <div style="font-size:11px;opacity:.6;margin-bottom:8px">HERO PREVIEW</div>
      <div id="prev-hero-title" style="font-size:28px;font-weight:900;margin-bottom:8px">{{ $s['hero_title_ar']??'اجعل موقعك' }} <span style="color:#60a5fa">يتصدر البحث</span></div>
      <div id="prev-hero-desc" style="font-size:14px;opacity:.8">{{ Str::limit($s['hero_desc_ar']??'',60) }}</div>
    </div>

    <hr style="margin:24px 0;border:none;border-top:1px solid #f1f5f9">

    {{-- Text content --}}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
      <div>
        <label class="form-label">{{ t('عنوان Hero (عربي)','Hero Title AR') }}</label>
        <input type="text" name="hero_title_ar" class="form-input" value="{{ $s['hero_title_ar']??'اجعل موقعك' }}" oninput="document.getElementById('prev-hero-title').textContent=this.value">
      </div>
      <div>
        <label class="form-label">Hero Title (English)</label>
        <input type="text" name="hero_title_en" class="form-input" value="{{ $s['hero_title_en']??'Make Your Website' }}">
      </div>
      <div>
        <label class="form-label">{{ t('الكلمات المتحركة (عربي) — افصل بـ |','Animated Words AR — separate by |') }}</label>
        <input type="text" name="hero_words_ar" class="form-input" value="{{ $s['hero_words_ar']??'يتصدر البحث|ينمو بسرعة' }}" placeholder="كلمة 1|كلمة 2|كلمة 3">
      </div>
      <div>
        <label class="form-label">Animated Words EN — separate by |</label>
        <input type="text" name="hero_words_en" class="form-input" value="{{ $s['hero_words_en']??'Rank Higher|Grow Faster' }}" placeholder="Word 1|Word 2|Word 3">
      </div>
      <div>
        <label class="form-label">{{ t('الوصف (عربي)','Description AR') }}</label>
        <textarea name="hero_desc_ar" class="form-input" rows="3" oninput="document.getElementById('prev-hero-desc').textContent=this.value.substring(0,80)">{{ $s['hero_desc_ar']??'' }}</textarea>
      </div>
      <div>
        <label class="form-label">Description (English)</label>
        <textarea name="hero_desc_en" class="form-input" rows="3">{{ $s['hero_desc_en']??'' }}</textarea>
      </div>
      <div>
        <label class="form-label">{{ t('نص الزر الأول (عربي)','Button 1 AR') }}</label>
        <input type="text" name="hero_btn1_ar" class="form-input" value="{{ $s['hero_btn1_ar']??'عرض المنتجات' }}">
      </div>
      <div>
        <label class="form-label">Button 1 (English)</label>
        <input type="text" name="hero_btn1_en" class="form-input" value="{{ $s['hero_btn1_en']??'View Products' }}">
      </div>
      <div>
        <label class="form-label">{{ t('نص الزر الثاني (عربي)','Button 2 AR') }}</label>
        <input type="text" name="hero_btn2_ar" class="form-input" value="{{ $s['hero_btn2_ar']??'ابدأ مجاناً' }}">
      </div>
      <div>
        <label class="form-label">Button 2 (English)</label>
        <input type="text" name="hero_btn2_en" class="form-input" value="{{ $s['hero_btn2_en']??'Start Free' }}">
      </div>
    </div>

    <hr style="margin:20px 0;border:none;border-top:1px solid #f1f5f9">
    <div style="display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border-radius:10px;padding:14px 18px">
      <div><strong>✨ {{ t('تأثير الجسيمات المتحركة','Animated Particles Effect') }}</strong><br><small style="color:#64748b">{{ t('نقاط متحركة في خلفية الـ Hero','Animated dots in hero background') }}</small></div>
      <label class="toggle-switch">
        <input type="checkbox" name="hero_particles" value="1" {{ ($s['hero_particles']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
    </div>
  </div>
</div>
</form>
</div>

{{-- ═══ TAB: SECTIONS ═══ --}}
<div class="tab-panel" id="tab-sections">
<div id="sections-save-msg" style="display:none;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:600"></div>

<form id="sections-form">
@csrf

{{-- ══ PRODUCTS ══ --}}
<div class="card" style="margin-bottom:16px">
  <div class="card-header" style="cursor:pointer" onclick="toggleSection('sec-products')">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-size:20px">📦</span>
      <div><div style="font-weight:700">{{ t('قسم المنتجات','Products Section') }}</div><div style="font-size:12px;color:#94a3b8">{{ t('يعرض كروت المنتجات','Shows product cards') }}</div></div>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <label class="toggle-switch" onclick="event.stopPropagation()">
        <input type="checkbox" name="section_products" value="1" {{ ($s['section_products']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
      <span id="arr-sec-products" style="color:#94a3b8">▼</span>
    </div>
  </div>
  <div id="sec-products" style="padding:20px;border-top:1px solid #f1f5f9">
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('عنوان القسم (عربي)','Title AR') }}</label>
        <input type="text" name="section_products_title_ar" class="form-input" value="{{ $s['section_products_title_ar']??'كل ما تحتاجه لموقع ناجح' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Section Title (English)</label>
        <input type="text" name="section_products_title_en" class="form-input" value="{{ $s['section_products_title_en']??'Everything You Need' }}" dir="ltr"></div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">{{ t('عدد المنتجات المعروضة (0 = كل)','Products to show (0 = all)') }}</label>
        <input type="number" name="section_products_count" class="form-input" value="{{ $s['section_products_count']??'0' }}" min="0" max="20">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('عدد الأعمدة في الصف','Columns per Row') }}</label>
        <div style="display:flex;gap:6px">
          @foreach([2,3,4] as $c)
          <label style="border:2px solid {{ ($s['section_products_cols']??'3')==$c?'#2563eb':'#e2e8f0' }};border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;font-size:14px">
            <input type="radio" name="section_products_cols" value="{{ $c }}" {{ ($s['section_products_cols']??'3')==$c?'checked':'' }} style="display:none">{{ $c }}
          </label>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>

{{-- ══ PRICING ══ --}}
<div class="card" style="margin-bottom:16px">
  <div class="card-header" style="cursor:pointer" onclick="toggleSection('sec-pricing')">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-size:20px">💳</span>
      <div><div style="font-weight:700">{{ t('قسم الأسعار','Pricing Section') }}</div><div style="font-size:12px;color:#94a3b8">{{ t('يعرض خطط وأسعار كل إضافة','Shows per-plugin pricing plans') }}</div></div>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <label class="toggle-switch" onclick="event.stopPropagation()">
        <input type="checkbox" name="section_pricing" value="1" {{ ($s['section_pricing']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
      <span id="arr-sec-pricing" style="color:#94a3b8">▼</span>
    </div>
  </div>
  <div id="sec-pricing" style="padding:20px;border-top:1px solid #f1f5f9">
    <div class="alert alert-info">💡 {{ t('الأسعار تُدار من قسم "أسعار الإضافات" في القائمة','Prices are managed from "Plugin Pricing" section in the menu') }}
      <a href="{{ route('admin.product-plans.overview') }}" class="btn btn-sm btn-outline" style="margin-right:8px">💰 {{ t('إدارة الأسعار','Manage Pricing') }}</a>
    </div>
  </div>
</div>

{{-- ══ WHY US ══ --}}
<div class="card" style="margin-bottom:16px">
  <div class="card-header" style="cursor:pointer" onclick="toggleSection('sec-why')">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-size:20px">⭐</span>
      <div><div style="font-weight:700">{{ t('قسم لماذا نحن','Why Us Section') }}</div><div style="font-size:12px;color:#94a3b8">{{ t('يعرض مميزات المنصة','Shows platform advantages') }}</div></div>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <label class="toggle-switch" onclick="event.stopPropagation()">
        <input type="checkbox" name="section_why" value="1" {{ ($s['section_why']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
      <span id="arr-sec-why" style="color:#94a3b8">▼</span>
    </div>
  </div>
  <div id="sec-why" style="padding:20px;border-top:1px solid #f1f5f9">
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('عنوان القسم (عربي)','Title AR') }}</label>
        <input type="text" name="section_why_title_ar" class="form-input" value="{{ $s['section_why_title_ar']??'لماذا يختار الآلاف منتجاتنا؟' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Section Title (English)</label>
        <input type="text" name="section_why_title_en" class="form-input" value="{{ $s['section_why_title_en']??'Why Thousands Choose Us?' }}" dir="ltr"></div>
    </div>
    <div class="form-group">
      <label class="form-label">{{ t('عناصر القسم (عربي) — اسم القسم سطر، وصفه السطر التالي','Section items AR — title line, description next line') }}</label>
      <textarea name="section_why_items_ar" class="form-input" rows="8" dir="rtl" placeholder="جودة عالية&#10;مُختبر ومُحسَّن للأداء&#10;أمان كامل&#10;مُختبر بمعايير أمان عالية">{{ $s['section_why_items_ar']??'' }}</textarea>
      <div style="font-size:11px;color:#94a3b8;margin-top:3px">{{ t('سطر: العنوان | سطر: الوصف | سطر: العنوان | ...','Line: Title | Line: Description | repeat...') }}</div>
    </div>
    <div class="form-group">
      <label class="form-label">Section Items (English) — same format</label>
      <textarea name="section_why_items_en" class="form-input" rows="8" dir="ltr" placeholder="High Quality&#10;Tested and performance-optimized">{{ $s['section_why_items_en']??'' }}</textarea>
    </div>
    <div class="form-group">
      <label class="form-label">{{ t('عدد الأعمدة في الصف','Columns per Row') }}</label>
      <div style="display:flex;gap:6px">
        @foreach([2,3,4,6] as $c)
        <label style="border:2px solid {{ ($s['section_why_cols']??'3')==$c?'#2563eb':'#e2e8f0' }};border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;font-size:14px">
          <input type="radio" name="section_why_cols" value="{{ $c }}" {{ ($s['section_why_cols']??'3')==$c?'checked':'' }} style="display:none">{{ $c }}
        </label>
        @endforeach
      </div>
    </div>
  </div>
</div>

{{-- ══ STATS ══ --}}
<div class="card" style="margin-bottom:16px">
  <div class="card-header" style="cursor:pointer" onclick="toggleSection('sec-stats')">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-size:20px">📊</span>
      <div><div style="font-weight:700">{{ t('إحصائيات الـ Hero','Hero Stats') }}</div><div style="font-size:12px;color:#94a3b8">{{ t('أرقام إحصائية في الهيدر','Statistical numbers in hero') }}</div></div>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <label class="toggle-switch" onclick="event.stopPropagation()">
        <input type="checkbox" name="section_stats" value="1" {{ ($s['section_stats']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
      <span id="arr-sec-stats" style="color:#94a3b8">▼</span>
    </div>
  </div>
  <div id="sec-stats" style="padding:20px;border-top:1px solid #f1f5f9">
    <div id="stats-items">
      @php
        $statsRaw = $s['section_stats_items'] ?? '24/7|دعم مستمر|Support|⏰|4.9|تقييم|Rating|⭐|500|موقع|Websites|🌐|4|سنوات|Years|🏆';
        $statParts = explode('|', $statsRaw);
        $stats = [];
        for ($i = 0; $i < count($statParts); $i += 4) {
            $stats[] = [
                'value' => $statParts[$i] ?? '',
                'label_ar' => $statParts[$i+1] ?? '',
                'label_en' => $statParts[$i+2] ?? '',
                'icon' => $statParts[$i+3] ?? '',
            ];
        }
      @endphp
      @foreach($stats as $idx => $stat)
      <div class="stat-edit-row" style="display:grid;grid-template-columns:80px 1fr 1fr 60px auto;gap:8px;align-items:center;padding:8px;background:#f8fafc;border-radius:8px;margin-bottom:6px">
        <input type="text" class="form-input stat-value" value="{{ $stat['value'] }}" placeholder="500" style="font-size:14px;font-weight:700;text-align:center">
        <input type="text" class="form-input stat-label-ar" value="{{ $stat['label_ar'] }}" placeholder="موقع" dir="rtl" style="font-size:13px">
        <input type="text" class="form-input stat-label-en" value="{{ $stat['label_en'] }}" placeholder="Websites" dir="ltr" style="font-size:13px">
        <input type="text" class="form-input stat-icon" value="{{ $stat['icon'] }}" placeholder="🌐" style="text-align:center;font-size:18px">
        <button type="button" onclick="this.closest('.stat-edit-row').remove()" class="btn btn-sm btn-danger">✕</button>
      </div>
      @endforeach
    </div>
    <button type="button" onclick="addStat()" class="btn btn-outline btn-sm">➕ {{ t('إضافة إحصائية','Add Stat') }}</button>
    <input type="hidden" name="section_stats_items" id="stats-hidden" value="{{ $s['section_stats_items']??'' }}">
  </div>
</div>

{{-- ══ BLOG ══ --}}
<div class="card" style="margin-bottom:16px">
  <div class="card-header" style="cursor:pointer" onclick="toggleSection('sec-blog')">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-size:20px">📰</span>
      <div><div style="font-weight:700">{{ t('قسم المدونة','Blog Section') }}</div><div style="font-size:12px;color:#94a3b8">{{ t('يعرض آخر المقالات','Shows latest blog posts') }}</div></div>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <label class="toggle-switch" onclick="event.stopPropagation()">
        <input type="checkbox" name="section_blog" value="1" {{ ($s['section_blog']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
      <span id="arr-sec-blog" style="color:#94a3b8">▼</span>
    </div>
  </div>
  <div id="sec-blog" style="padding:20px;border-top:1px solid #f1f5f9">
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('عنوان القسم (عربي)','Title AR') }}</label>
        <input type="text" name="section_blog_title_ar" class="form-input" value="{{ $s['section_blog_title_ar']??'آخر المقالات' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Section Title (English)</label>
        <input type="text" name="section_blog_title_en" class="form-input" value="{{ $s['section_blog_title_en']??'Latest Posts' }}" dir="ltr"></div>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label class="form-label">{{ t('عدد المقالات','Posts Count') }}</label>
        <select name="blog_posts_count" class="form-input" style="width:auto">
          @foreach([3,4,6,8] as $n)
          <option value="{{ $n }}" {{ ($s['blog_posts_count']??'3')==$n?'selected':'' }}>{{ $n }}</option>
          @endforeach
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('نمط العرض','Display Style') }}</label>
        <div style="display:flex;gap:8px">
          @foreach([['grid','📦 Grid'],['list','📋 List'],['masonry','🧱 Masonry']] as [$val,$lbl])
          <label style="border:2px solid {{ ($s['blog_display_style']??'grid')===$val?'#2563eb':'#e2e8f0' }};border-radius:8px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s">
            <input type="radio" name="blog_display_style" value="{{ $val }}" {{ ($s['blog_display_style']??'grid')===$val?'checked':'' }} style="display:none">{{ $lbl }}
          </label>
          @endforeach
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('عدد الأعمدة في الصف','Columns per Row') }}</label>
        <div style="display:flex;gap:6px">
          @foreach([1,2,3,4] as $c)
          <label style="border:2px solid {{ ($s['blog_cols']??'3')==$c?'#2563eb':'#e2e8f0' }};border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;font-size:14px">
            <input type="radio" name="blog_cols" value="{{ $c }}" {{ ($s['blog_cols']??'3')==$c?'checked':'' }} style="display:none">{{ $c }}
          </label>
          @endforeach
        </div>
      </div>
    </div>
  </div>
</div>

{{-- ══ CTA ══ --}}
<div class="card" style="margin-bottom:16px">
  <div class="card-header" style="cursor:pointer" onclick="toggleSection('sec-cta')">
    <div style="display:flex;align-items:center;gap:10px">
      <span style="font-size:20px">🚀</span>
      <div><div style="font-weight:700">{{ t('قسم الـ CTA','CTA Section') }}</div><div style="font-size:12px;color:#94a3b8">{{ t('قسم الدعوة للعمل','Call-to-action section') }}</div></div>
    </div>
    <div style="display:flex;align-items:center;gap:12px">
      <label class="toggle-switch" onclick="event.stopPropagation()">
        <input type="checkbox" name="section_cta" value="1" {{ ($s['section_cta']??'1')==='1'?'checked':'' }}>
        <span class="toggle-slider"></span>
      </label>
      <span id="arr-sec-cta" style="color:#94a3b8">▼</span>
    </div>
  </div>
  <div id="sec-cta" style="padding:20px;border-top:1px solid #f1f5f9">
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('العنوان (عربي)','Title AR') }}</label>
        <input type="text" name="cta_title_ar" class="form-input" value="{{ $s['cta_title_ar']??'جاهز للبدء اليوم؟' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Title (English)</label>
        <input type="text" name="cta_title_en" class="form-input" value="{{ $s['cta_title_en']??'Ready to Get Started?' }}" dir="ltr"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('الوصف (عربي)','Desc AR') }}</label>
        <input type="text" name="cta_desc_ar" class="form-input" value="{{ $s['cta_desc_ar']??'انضم لآلاف المواقع' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Desc (English)</label>
        <input type="text" name="cta_desc_en" class="form-input" value="{{ $s['cta_desc_en']??'Join thousands of websites' }}" dir="ltr"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('الزرار الأول (عربي)','Btn 1 AR') }}</label>
        <input type="text" name="cta_btn1_ar" class="form-input" value="{{ $s['cta_btn1_ar']??'ابدأ مجاناً' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Btn 1 (English)</label>
        <input type="text" name="cta_btn1_en" class="form-input" value="{{ $s['cta_btn1_en']??'Get Started Free' }}" dir="ltr"></div>
    </div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">{{ t('الزرار الثاني (عربي)','Btn 2 AR') }}</label>
        <input type="text" name="cta_btn2_ar" class="form-input" value="{{ $s['cta_btn2_ar']??'تواصل معنا' }}" dir="rtl"></div>
      <div class="form-group"><label class="form-label">Btn 2 (English)</label>
        <input type="text" name="cta_btn2_en" class="form-input" value="{{ $s['cta_btn2_en']??'Contact Us' }}" dir="ltr"></div>
    </div>
  </div>
</div>

<div style="text-align:center;margin-top:8px">
  <button type="button" onclick="saveSections()" class="btn btn-primary btn-lg" style="min-width:200px">
    💾 {{ t('حفظ كل الأقسام','Save All Sections') }}
  </button>
</div>

</form>
</div>

{{-- ═══ TAB: TYPOGRAPHY ═══ --}}
<div class="tab-panel" id="tab-typography">
<form method="POST" action="{{ route('admin.theme.typography') }}">
@csrf
<div class="card">
  <div class="card-header">
    <h3>🔤 {{ t('إعدادات الخطوط','Font Settings') }}</h3>
    <button type="submit" class="btn btn-primary btn-sm">💾 {{ t('حفظ','Save') }}</button>
  </div>
  <div style="padding:20px">
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px">
      <div>
        <label class="form-label">{{ t('خط اللغة العربية','Arabic Font') }}</label>
        <select name="font_family_ar" class="form-input" onchange="updateFontPreview()">
          @foreach(['Cairo','Tajawal','Almarai','Noto Kufi Arabic','IBM Plex Sans Arabic'] as $f)
          <option value="{{ $f }}" {{ ($s['font_family_ar']??'Cairo')===$f?'selected':'' }}>{{ $f }}</option>
          @endforeach
        </select>
        <div class="font-preview" id="prev-font-ar" style="font-family:'{{ $s['font_family_ar']??'Cairo' }}',sans-serif;font-size:20px">
          مرحباً بك في Media Serve
        </div>
      </div>
      <div>
        <label class="form-label">English Font</label>
        <select name="font_family_en" class="form-input" onchange="updateFontPreview()">
          @foreach(['Inter','Poppins','Roboto','Open Sans','Nunito','Montserrat'] as $f)
          <option value="{{ $f }}" {{ ($s['font_family_en']??'Inter')===$f?'selected':'' }}>{{ $f }}</option>
          @endforeach
        </select>
        <div class="font-preview" id="prev-font-en" style="font-family:'{{ $s['font_family_en']??'Inter' }}',sans-serif;font-size:18px">
          Welcome to Media Serve
        </div>
      </div>
      <div>
        <label class="form-label">{{ t('حجم الخط الأساسي (px)','Base Font Size (px)') }}</label>
        <input type="range" name="font_size_base" min="14" max="20" value="{{ $s['font_size_base']??'16' }}" class="form-input" style="padding:8px 0" oninput="document.getElementById('font-size-val').textContent=this.value+'px'">
        <div style="text-align:center;font-size:13px;font-weight:700;margin-top:6px" id="font-size-val">{{ $s['font_size_base']??'16' }}px</div>
      </div>
    </div>

    <div class="alert alert-info" style="margin-top:16px">
      💡 {{ t('الخطوط يتم تحميلها من Google Fonts تلقائياً','Fonts are loaded from Google Fonts automatically') }}
    </div>
  </div>
</div>
</form>
</div>

@endsection

@section('scripts')
<script>
function switchTab(name) {
  document.querySelectorAll('.tab-panel').forEach(function(p){ p.classList.remove('active'); });
  document.querySelectorAll('.tab-btn').forEach(function(b){ b.classList.remove('active'); });
  document.getElementById('tab-'+name).classList.add('active');
  event.target.classList.add('active');
}

// Color live preview
document.querySelectorAll('[name=theme_primary]').forEach(function(el){
  el.addEventListener('input', function(){ document.getElementById('prev-btn').style.background = this.value; });
});
document.querySelectorAll('[name=theme_accent]').forEach(function(el){
  el.addEventListener('input', function(){ document.getElementById('prev-btn2').style.background = this.value; });
});
document.querySelectorAll('[name=theme_success]').forEach(function(el){
  el.addEventListener('input', function(){ document.getElementById('prev-badge').style.color = this.value; });
});
document.querySelectorAll('[name=theme_danger]').forEach(function(el){
  el.addEventListener('input', function(){ document.getElementById('prev-badge2').style.color = this.value; });
});

// Hero preview
function updateHeroPreview() {
  var from = document.querySelector('[name=hero_bg_from]').value;
  var mid  = document.querySelector('[name=hero_bg_mid]').value;
  var to   = document.querySelector('[name=hero_bg_to]').value;
  document.getElementById('hero-preview').style.background = 'linear-gradient(135deg,'+from+','+mid+','+to+')';
}

// Sections collapsible
function toggleSection(id) {
  var el = document.getElementById(id);
  var arr = document.getElementById('arr-' + id);
  if (el.style.display === 'none') {
    el.style.display = 'block';
    if (arr) arr.textContent = '▲';
  } else {
    el.style.display = 'none';
    if (arr) arr.textContent = '▼';
  }
}
// Collapse all sections by default
document.querySelectorAll('[id^="sec-"]').forEach(function(el) {
  el.style.display = 'none';
});

// Add stat row
function addStat() {
  var container = document.getElementById('stats-items');
  var row = document.createElement('div');
  row.className = 'stat-edit-row';
  row.style.cssText = 'display:grid;grid-template-columns:80px 1fr 1fr 60px auto;gap:8px;align-items:center;padding:8px;background:#f8fafc;border-radius:8px;margin-bottom:6px';
  row.innerHTML = '<input type="text" class="form-input stat-value" placeholder="100" style="font-size:14px;font-weight:700;text-align:center">' +
    '<input type="text" class="form-input stat-label-ar" placeholder="وصف" dir="rtl" style="font-size:13px">' +
    '<input type="text" class="form-input stat-label-en" placeholder="Label" dir="ltr" style="font-size:13px">' +
    '<input type="text" class="form-input stat-icon" placeholder="⭐" style="text-align:center;font-size:18px">' +
    '<button type="button" onclick="this.closest(\'.stat-edit-row\').remove()" class="btn btn-sm btn-danger">✕</button>';
  container.appendChild(row);
}

// Save sections via AJAX
function saveSections() {
  // Build stats hidden field
  var rows = document.querySelectorAll('.stat-edit-row');
  var parts = [];
  rows.forEach(function(row) {
    var v  = row.querySelector('.stat-value').value;
    var ar = row.querySelector('.stat-label-ar').value;
    var en = row.querySelector('.stat-label-en').value;
    var ic = row.querySelector('.stat-icon').value;
    if (v) parts.push(v + '|' + ar + '|' + en + '|' + ic);
  });
  document.getElementById('stats-hidden').value = parts.join('|');

  var form = document.getElementById('sections-form');
  var fd = new FormData(form);
  var msg = document.getElementById('sections-save-msg');

  fetch('{{ route("admin.theme.sections") }}', {
    method: 'POST',
    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
    body: fd
  })
  .then(r => r.json())
  .then(data => {
    msg.style.display = 'block';
    msg.style.background = data.success ? '#f0fdf4' : '#fef2f2';
    msg.style.color = data.success ? '#16a34a' : '#dc2626';
    msg.style.border = data.success ? '1px solid #bbf7d0' : '1px solid #fecaca';
    msg.textContent = data.message || (data.success ? '✅ تم الحفظ' : '❌ خطأ');
    window.scrollTo(0,0);
    setTimeout(() => msg.style.display = 'none', 3000);
  })
  .catch(err => {
    msg.style.display = 'block';
    msg.style.background = '#fef2f2';
    msg.style.color = '#dc2626';
    msg.textContent = '❌ ' + err;
    window.scrollTo(0,0);
  });
}

// Blog display style radio visual
document.querySelectorAll('[name=blog_display_style]').forEach(function(r) {
  r.addEventListener('change', function() {
    document.querySelectorAll('[name=blog_display_style]').forEach(function(rb) {
      rb.closest('label').style.borderColor = rb.checked ? '#2563eb' : '#e2e8f0';
    });
  });
});
</script>
@endsection