@extends('admin.layout')

@section('title', 'إعدادات الموقع — نظام مقالاتي')

@push('css')
<style>
/* 🌐 الهوية الزجاجية الموحدة */
:root {
  --clr-primary: #6C63FF;
  --clr-secondary: #00B4D8;
  --clr-bg-light: rgba(255,255,255,0.85);
  --clr-border: rgba(0,0,0,0.08);
  --radius: 18px;
  --blur: 14px;
}

body {
  font-family: "Tajawal", sans-serif;
  background: #f8fafc;
  direction: rtl;
  color: #1e293b;
}

/* 🪟 البطاقة الزجاجية */
.settings-card {
  background: var(--clr-bg-light);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  border: 1px solid var(--clr-border);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  padding: 2rem;
}

/* 🎨 الأزرار */
.btn-gradient {
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  color: #fff !important;
  border: none;
  border-radius: 9999px;
  padding: 10px 26px;
  font-weight: 600;
  transition: all .3s ease;
}
.btn-gradient:hover {
  opacity: .9;
  transform: translateY(-2px);
}

/* 🧩 التبويبات */
.tab-button {
  background: transparent;
  border: none;
  font-weight: 600;
  color: #64748b;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all .3s ease;
}
.tab-button.active {
  color: var(--clr-primary);
  background: rgba(108,99,255,0.1);
}
.tab-button:hover {
  color: var(--clr-secondary);
}

/* ✅ الحقول */
.form-label {
  font-weight: 600;
  color: #334155;
}
input[type="text"],
input[type="email"],
input[type="file"],
input[type="color"],
textarea,
select {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 0.6rem 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color .2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.15);
  outline: none;
}

/* ✅ تنبيه الحفظ */
.alert-success {
  background: linear-gradient(90deg, var(--clr-secondary), var(--clr-primary));
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 📱 تجاوبية */
@media (max-width: 768px) {
  h1 { font-size: 1.25rem; }
  .settings-card { padding: 1.25rem; }
  .btn-gradient { padding: 8px 20px; font-size: 0.95rem; }
}
</style>
@endpush

@section('content')
<div class="container py-4">

  <h3 class="fw-bold text-primary mb-4">إعدادات موقع نظام مقالاتي</h3>

  @if(session('success'))
    <div class="alert-success p-3 mb-4">{{ session('success') }}</div>
  @endif

  <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data" x-data="{tab: 'general'}">
    @csrf

    {{-- 🔹 التبويبات --}}
    <div class="d-flex flex-wrap gap-2 border-bottom pb-3 mb-4">
      @foreach($tabs as $key => $label)
        <button type="button"
                @click="tab='{{ $key }}'"
                :class="tab=='{{ $key }}' ? 'tab-button active' : 'tab-button'">
          {{ $label }}
        </button>
      @endforeach
    </div>

    <div class="settings-card">
      {{-- 🏠 الإعدادات العامة --}}
      <div x-show="tab=='general'" class="space-y-4">
        <x-input name="site_name" label="اسم الموقع" :value="$settings['site_name'] ?? ''" />
        <x-textarea name="site_description" label="وصف الموقع" :value="$settings['site_description'] ?? ''" />

        <div>
          <label class="form-label">شعار الموقع</label>
          @if(!empty($settings['site_logo']))
            <img src="{{ Storage::url($settings['site_logo']) }}" class="rounded mt-2 mb-2" width="100">
          @endif
          <input type="file" name="site_logo">
        </div>

        <x-input name="contact_email" label="البريد الإلكتروني" :value="$settings['contact_email'] ?? ''" />
        <x-input name="contact_phone" label="رقم الهاتف" :value="$settings['contact_phone'] ?? ''" />
      </div>

      {{-- 🔍 SEO --}}
      <div x-show="tab=='seo'" class="space-y-4">
        <x-input name="meta_title" label="عنوان الموقع (Meta Title)" :value="$settings['meta_title'] ?? ''" />
        <x-textarea name="meta_description" label="الوصف (Meta Description)" :value="$settings['meta_description'] ?? ''" />
        <x-input name="meta_keywords" label="الكلمات المفتاحية (Keywords)" :value="$settings['meta_keywords'] ?? ''" />
        <x-input name="meta_author" label="اسم الكاتب الافتراضي" :value="$settings['meta_author'] ?? ''" />

        <div>
          <label class="form-label">صورة المشاركة (Meta Image)</label>
          @if(!empty($settings['meta_image']))
            <img src="{{ Storage::url($settings['meta_image']) }}" class="rounded mt-2 mb-2" width="100">
          @endif
          <input type="file" name="meta_image">
        </div>
      </div>

      {{-- 🌐 التواصل --}}
      <div x-show="tab=='social'" class="space-y-4">
        <x-input name="facebook" label="Facebook" :value="$settings['facebook'] ?? ''" />
        <x-input name="twitter" label="Twitter" :value="$settings['twitter'] ?? ''" />
        <x-input name="instagram" label="Instagram" :value="$settings['instagram'] ?? ''" />
        <x-input name="youtube" label="YouTube" :value="$settings['youtube'] ?? ''" />
        <x-input name="telegram" label="Telegram" :value="$settings['telegram'] ?? ''" />
      </div>

      {{-- 🎨 المظهر --}}
      <div x-show="tab=='theme'" class="space-y-4">
        <x-input name="theme_color" label="اللون الأساسي" type="color" :value="$settings['theme_color'] ?? '#6C63FF'" />
        <x-select name="font_family" label="الخط الافتراضي" :options="['Tajawal'=>'Tajawal','Cairo'=>'Cairo','Almarai'=>'Almarai']" :value="$settings['font_family'] ?? 'Tajawal'" />
        <x-select name="layout_style" label="أسلوب التصميم" :options="['glass'=>'زجاجي','flat'=>'مسطح']" :value="$settings['layout_style'] ?? 'glass'" />
        <x-switch name="dark_mode" label="تفعيل الوضع الليلي" :checked="$settings['dark_mode'] ?? false" />
      </div>

      {{-- 💰 الإعلانات --}}
      <div x-show="tab=='ads'" class="space-y-4">
        <x-textarea name="ad_header" label="إعلان أعلى الموقع" :value="$settings['ad_header'] ?? ''" rows="3" />
        <x-textarea name="ad_sidebar" label="إعلان الشريط الجانبي" :value="$settings['ad_sidebar'] ?? ''" rows="3" />
        <x-textarea name="ad_footer" label="إعلان أسفل الموقع" :value="$settings['ad_footer'] ?? ''" rows="3" />
      </div>

      {{-- ⚡ كود مخصص --}}
      <div x-show="tab=='custom'" class="space-y-4">
        <x-textarea name="analytics_code" label="كود Google Analytics أو Meta Pixel" :value="$settings['analytics_code'] ?? ''" rows="4" />
        <x-textarea name="custom_css" label="CSS مخصص" :value="$settings['custom_css'] ?? ''" rows="4" />
        <x-textarea name="custom_js" label="JavaScript مخصص" :value="$settings['custom_js'] ?? ''" rows="4" />
      </div>
    </div>

    <x-switch name="registration_enabled" label="السماح بالتسجيل" 
    :checked="$settings['registration_enabled'] ?? false" />


    {{-- 🔘 زر الحفظ --}}
    <div class="text-end mt-4">
      <button type="submit" class="btn-gradient">حفظ الإعدادات</button>
    </div>
  </form>
</div>

{{-- ✅ Alpine.js --}}
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endsection