@extends('layouts.dashboard')
@section('title', t('تصنيفات المدونة','Blog Categories'))
@section('page-title','🏷️ '.t('تصنيفات المدونة','Blog Categories'))

@section('content')
<div class="two-col-grid" style="align-items:start">

  {{-- List --}}
  <div class="card">
    <div class="card-header">
      <h3>{{ t('التصنيفات الموجودة','Existing Categories') }}</h3>
      <span class="badge badge-blue">{{ $cats->count() }}</span>
    </div>
    @forelse($cats as $cat)
    <div style="padding:14px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:12px">
      <div style="width:42px;height:42px;border-radius:10px;background:{{ $cat->color }}22;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">{{ $cat->icon }}</div>
      <div style="flex:1">
        <div style="font-weight:700;font-size:14px">{{ $cat->name_ar }}</div>
        @if($cat->name_en)<div style="font-size:12px;color:#94a3b8">{{ $cat->name_en }}</div>@endif
        <div style="font-size:11px;color:#94a3b8;margin-top:2px">
          <code>/{{ $cat->slug }}</code> |
          <span class="badge {{ $cat->is_active?'badge-green':'badge-gray' }}" style="font-size:10px">{{ $cat->is_active?t('نشط','Active'):t('مخفي','Hidden') }}</span>
        </div>
      </div>
      <div style="display:flex;gap:4px">
        <button onclick="editCat({{ $cat->id }},'{{ addslashes($cat->name_ar) }}','{{ addslashes($cat->name_en) }}','{{ $cat->icon }}','{{ $cat->color }}','{{ $cat->sort_order }}','{{ $cat->is_active }}')"
          class="btn btn-sm" style="background:#dbeafe;color:#2563eb">✏️</button>
        <form method="POST" action="{{ route('admin.blog-cats.delete',$cat->id) }}" style="display:inline">
          @csrf @method('DELETE')
          <button class="btn btn-sm btn-danger" onclick="return confirm('{{ t('حذف؟','Delete?') }}')">🗑️</button>
        </form>
      </div>
    </div>
    @empty
    <p style="text-align:center;padding:32px;color:#94a3b8">{{ t('لا يوجد تصنيفات','No categories yet') }}</p>
    @endforelse
  </div>

  {{-- Add / Edit Form --}}
  <div style="position:sticky;top:20px">
    <div class="card">
      <div class="card-header"><h3 id="form-title">➕ {{ t('إضافة تصنيف','Add Category') }}</h3></div>
      <div style="padding:20px">

        {{-- Add Form --}}
        <form method="POST" action="{{ route('admin.blog-cats.store') }}" id="add-form">
          @csrf
          <div class="form-group">
            <label class="form-label">{{ t('الاسم (عربي)','Name AR') }} *</label>
            <input type="text" name="name_ar" id="add_name_ar" class="form-input" required dir="rtl">
          </div>
          <div class="form-group">
            <label class="form-label">Name (English)</label>
            <input type="text" name="name_en" id="add_name_en" class="form-input" dir="ltr">
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">{{ t('أيقونة','Icon') }}</label>
              <input type="text" name="icon" id="add_icon" class="form-input" value="📁" maxlength="5">
            </div>
            <div class="form-group">
              <label class="form-label">{{ t('اللون','Color') }}</label>
              <div style="display:flex;gap:6px">
                <input type="color" name="color" id="add_color" value="#2563eb" style="width:48px;height:38px;border:1px solid #e2e8f0;border-radius:8px">
                <input type="text" value="#2563eb" class="form-input" style="flex:1" oninput="document.getElementById('add_color').value=this.value">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">Slug</label>
            <input type="text" name="slug" class="form-input" dir="ltr" placeholder="{{ t('اتركه فارغاً للتوليد التلقائي','Leave empty for auto') }}">
          </div>
          <button type="submit" class="btn btn-primary btn-block">➕ {{ t('إضافة','Add') }}</button>
        </form>

        {{-- Edit Form (hidden) --}}
        <form method="POST" id="edit-form" style="display:none">
          @csrf @method('PUT')
          <div class="form-group"><label class="form-label">{{ t('الاسم (عربي)','Name AR') }} *</label>
            <input type="text" name="name_ar" id="edit_name_ar" class="form-input" required dir="rtl"></div>
          <div class="form-group"><label class="form-label">Name (English)</label>
            <input type="text" name="name_en" id="edit_name_en" class="form-input" dir="ltr"></div>
          <div class="form-row">
            <div class="form-group"><label class="form-label">{{ t('أيقونة','Icon') }}</label>
              <input type="text" name="icon" id="edit_icon" class="form-input" maxlength="5"></div>
            <div class="form-group"><label class="form-label">{{ t('اللون','Color') }}</label>
              <div style="display:flex;gap:6px">
                <input type="color" name="color" id="edit_color" style="width:48px;height:38px;border:1px solid #e2e8f0;border-radius:8px">
                <input type="text" class="form-input" style="flex:1" oninput="document.getElementById('edit_color').value=this.value" id="edit_color_text">
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group"><label class="form-label">{{ t('الترتيب','Order') }}</label>
              <input type="number" name="sort_order" id="edit_order" class="form-input"></div>
            <div class="form-group" style="padding-top:28px">
              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
                <input type="checkbox" name="is_active" value="1" id="edit_active" style="width:16px;height:16px">
                <span style="font-weight:600">{{ t('نشط','Active') }}</span>
              </label>
            </div>
          </div>
          <div style="display:flex;gap:8px">
            <button type="submit" class="btn btn-primary" style="flex:1">💾 {{ t('حفظ','Save') }}</button>
            <button type="button" onclick="cancelEdit()" class="btn btn-outline">{{ t('إلغاء','Cancel') }}</button>
          </div>
        </form>

      </div>
    </div>
  </div>

</div>
@endsection

@section('scripts')
<script>
function editCat(id, name_ar, name_en, icon, color, order, active) {
  document.getElementById('add-form').style.display = 'none';
  var ef = document.getElementById('edit-form');
  ef.style.display = 'block';
  ef.action = '/admin/blog-cats/' + id;
  document.getElementById('edit_name_ar').value = name_ar;
  document.getElementById('edit_name_en').value = name_en;
  document.getElementById('edit_icon').value    = icon;
  document.getElementById('edit_color').value   = color;
  document.getElementById('edit_color_text').value = color;
  document.getElementById('edit_order').value   = order;
  document.getElementById('edit_active').checked = active == '1';
  document.getElementById('form-title').textContent = '✏️ تعديل: ' + name_ar;
  document.querySelector('.card:last-child').scrollIntoView({behavior:'smooth'});
}
function cancelEdit() {
  document.getElementById('edit-form').style.display = 'none';
  document.getElementById('add-form').style.display = 'block';
  document.getElementById('form-title').textContent = '➕ {{ t("إضافة تصنيف","Add Category") }}';
}
</script>
@endsection