@extends('layouts.dashboard')
@section('title', t('الإعدادات','Settings'))
@section('page-title','⚙️ '.t('إعدادات الموقع','Site Settings'))

@section('content')

<div id="save-msg" style="display:none;padding:14px 18px;border-radius:10px;margin-bottom:20px;font-weight:600"></div>

<form id="settings-form" enctype="multipart/form-data">
@csrf

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">

  {{-- ── General ── --}}
  <div class="card">
    <div class="card-header"><h3>🏠 {{ t('إعدادات عامة','General') }}</h3></div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
      <div class="form-group">
        <label class="form-label">{{ t('اسم الموقع','Site Name') }}</label>
        <input type="text" name="site_name" class="form-input" value="{{ $settings['site_name']??'' }}">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('الشعار الوصفي عربي','Tagline AR') }}</label>
        <input type="text" name="site_tagline_ar" class="form-input" value="{{ $settings['site_tagline_ar']??'' }}" dir="rtl">
      </div>
      <div class="form-group">
        <label class="form-label">Tagline (English)</label>
        <input type="text" name="site_tagline_en" class="form-input" value="{{ $settings['site_tagline_en']??'' }}" dir="ltr">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('اللغة الافتراضية','Default Language') }}</label>
        <select name="default_lang" class="form-input">
          @foreach(\App\Models\Language::where('is_active',1)->get() as $lang)
          <option value="{{ $lang->code }}" {{ ($settings['default_lang']??'ar')===$lang->code?'selected':'' }}>{{ $lang->flag }} {{ $lang->native }}</option>
          @endforeach
        </select>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('لوجو الموقع','Site Logo') }}</label>
        <input type="file" name="site_logo" class="form-input" accept="image/*">
        @if(!empty($settings['site_logo']))<div style="margin-top:6px"><img src="{{ asset($settings['site_logo']) }}" style="height:44px;border-radius:6px"></div>@endif
      </div>
    </div>
  </div>

  {{-- ── Contact Info ── --}}
  <div class="card">
    <div class="card-header"><h3>📞 {{ t('معلومات التواصل','Contact Info') }}</h3></div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
      <div class="form-group">
        <label class="form-label">{{ t('البريد الإلكتروني','Email') }}</label>
        <input type="email" name="site_email" class="form-input" value="{{ $settings['site_email']??'' }}" dir="ltr" placeholder="info@example.com">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('بريد التواصل (استقبال الرسائل)','Contact Email') }}</label>
        <input type="email" name="contact_email" class="form-input" value="{{ $settings['contact_email']??'info@mediaserves.com' }}" dir="ltr" placeholder="info@mediaserves.com">
        <div style="font-size:11px;color:#94a3b8;margin-top:3px">{{ t('سيصلك رسائل صفحة تواصل معنا على هذا البريد','Contact form messages will be sent here') }}</div>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('رقم الهاتف','Phone') }}</label>
        <input type="text" name="site_phone" class="form-input" value="{{ $settings['site_phone']??'' }}" dir="ltr" placeholder="+20 1XX XXX XXXX">
      </div>
      <div class="form-group">
        <label class="form-label">
          <span style="display:flex;align-items:center;gap:6px">
            <span style="background:#25d366;color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:13px">💬</span>
            WhatsApp
          </span>
        </label>
        <input type="text" name="site_whatsapp" class="form-input" value="{{ $settings['site_whatsapp']??'' }}" dir="ltr" placeholder="+20 1XX XXX XXXX">
        <div style="font-size:11px;color:#94a3b8;margin-top:3px">{{ t('سيظهر في صفحة تواصل معنا','Will appear on contact page') }}</div>
      </div>
    </div>
  </div>

  {{-- ── SEO ── --}}
  <div class="card">
    <div class="card-header"><h3>🔍 SEO</h3></div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
      <div class="form-group">
        <label class="form-label">Meta Description (عربي)</label>
        <textarea name="meta_desc_ar" class="form-input" rows="3" dir="rtl">{{ $settings['meta_desc_ar']??'' }}</textarea>
      </div>
      <div class="form-group">
        <label class="form-label">Meta Description (English)</label>
        <textarea name="meta_desc_en" class="form-input" rows="3" dir="ltr">{{ $settings['meta_desc_en']??'' }}</textarea>
      </div>
      <div class="form-group">
        <label class="form-label">Meta Keywords</label>
        <input type="text" name="meta_keywords" class="form-input" value="{{ $settings['meta_keywords']??'' }}" dir="ltr">
      </div>
      <div class="form-group">
        <label class="form-label">Google Analytics ID</label>
        <input type="text" name="google_analytics" class="form-input" value="{{ $settings['google_analytics']??'' }}" placeholder="G-XXXXXXXXXX" dir="ltr">
      </div>
    </div>
  </div>

  {{-- ── Blog & Comments ── --}}
  <div class="card">
    <div class="card-header"><h3>💬 {{ t('إعدادات المدونة والتعليقات','Blog & Comments') }}</h3></div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
      <div style="background:#f8fafc;border-radius:10px;padding:14px">
        <label style="display:flex;align-items:center;justify-content:space-between;cursor:pointer">
          <div>
            <div style="font-weight:700">{{ t('تفعيل التعليقات','Enable Comments') }}</div>
            <div style="font-size:12px;color:#64748b">{{ t('السماح للزوار بالتعليق على المقالات','Allow visitors to comment on posts') }}</div>
          </div>
          <label class="toggle-switch">
            <input type="checkbox" name="comments_enabled" value="1" {{ ($settings['comments_enabled']??'1')==='1'?'checked':'' }}>
            <span class="toggle-slider"></span>
          </label>
        </label>
      </div>
      <div style="background:#f8fafc;border-radius:10px;padding:14px">
        <label style="display:flex;align-items:center;justify-content:space-between;cursor:pointer">
          <div>
            <div style="font-weight:700">{{ t('نشر تلقائي للتعليقات','Auto-approve Comments') }}</div>
            <div style="font-size:12px;color:#64748b">{{ t('نشر تلقائي بدون مراجعة — غير مفعّل = تحتاج موافقة','Auto-publish without review') }}</div>
          </div>
          <label class="toggle-switch">
            <input type="checkbox" name="comments_auto" value="1" {{ ($settings['comments_auto']??'0')==='1'?'checked':'' }}>
            <span class="toggle-slider"></span>
          </label>
        </label>
      </div>
    </div>
  </div>

  {{-- ── Security ── --}}
  <div class="card">
    <div class="card-header"><h3>🔒 {{ t('الأمان','Security') }}</h3></div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
      <div style="background:#f8fafc;border-radius:10px;padding:14px">
        <label style="display:flex;align-items:center;justify-content:space-between;cursor:pointer">
          <div>
            <div style="font-weight:700">{{ t('تفعيل Google reCAPTCHA','Enable reCAPTCHA') }}</div>
            <div style="font-size:12px;color:#64748b">{{ t('يحمي نماذج الدخول من الروبوتات','Protects forms from bots') }}</div>
          </div>
          <label class="toggle-switch">
            <input type="checkbox" id="captcha_enabled" name="captcha_enabled" value="1" {{ ($settings['captcha_enabled']??'0')==='1'?'checked':'' }}>
            <span class="toggle-slider"></span>
          </label>
        </label>
      </div>
      <div class="form-group">
        <label class="form-label">Site Key</label>
        <input type="text" name="captcha_site_key" class="form-input" value="{{ $settings['captcha_site_key']??'' }}" placeholder="6Le..." dir="ltr">
      </div>
      <div class="form-group">
        <label class="form-label">Secret Key</label>
        <input type="password" name="captcha_secret" class="form-input" value="{{ $settings['captcha_secret']??'' }}" dir="ltr">
      </div>
      <div class="alert alert-info" style="font-size:12px">
        💡 <a href="https://www.google.com/recaptcha" target="_blank">google.com/recaptcha</a>
      </div>
    </div>
  </div>

  {{-- ── API & Payment ── --}}
  <div class="card">
    <div class="card-header"><h3>🔌 {{ t('API والدفع','API & Payment') }}</h3></div>
    <div style="padding:20px;display:flex;flex-direction:column;gap:14px">
      <div class="form-group">
        <label class="form-label">MS SEO Pro API URL</label>
        <input type="url" name="msseo_api_url" class="form-input" value="{{ $settings['msseo_api_url']??'' }}" dir="ltr">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('العملة','Currency') }}</label>
        <input type="text" name="currency" class="form-input" value="{{ $settings['currency']??'USD' }}" dir="ltr" style="max-width:120px">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('رمز العملة','Currency Symbol') }}</label>
        <input type="text" name="currency_symbol" class="form-input" value="{{ $settings['currency_symbol']??'$' }}" style="max-width:80px;text-align:center">
      </div>
    </div>
  </div>

</div>

<div style="text-align:center;margin-top:20px">
  <button type="button" id="save-btn" onclick="saveSettings()" class="btn btn-primary btn-lg" style="min-width:240px">
    💾 {{ t('حفظ كل الإعدادات','Save All Settings') }}
  </button>
</div>
</form>
@endsection

@section('scripts')
<script>
function saveSettings() {
  var btn = document.getElementById('save-btn');
  var msg = document.getElementById('save-msg');
  btn.disabled = true;
  btn.textContent = '⏳ {{ t("جاري الحفظ...","Saving...") }}';
  var form = document.getElementById('settings-form');
  var fd = new FormData(form);
  fetch('{{ route("admin.settings.update") }}', {
    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);
  })
  .catch(err => {
    msg.style.display = 'block';
    msg.style.background = '#fef2f2';
    msg.style.color = '#dc2626';
    msg.textContent = '❌ خطأ في الاتصال';
    window.scrollTo(0, 0);
  })
  .finally(() => {
    btn.disabled = false;
    btn.textContent = '💾 {{ t("حفظ كل الإعدادات","Save All Settings") }}';
  });
}
</script>
@endsection