@extends('admin.layout_editor')

@section('title', '🖋️ إنشاء مقال جديد — نظام مقالاتي')

@push('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">

<style>
  .editor-card{background:rgba(255,255,255,.9);border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:24px}
  .btn-gradient{background:linear-gradient(90deg,#6C63FF,#00B4D8);color:#fff;border:none;border-radius:9999px;padding:10px 22px;font-weight:600}
  .btn-gradient:hover{opacity:.9}
  .select2-container--default .select2-selection--multiple{min-height:48px;border-radius:10px}
</style>
@endpush

@section('content')
<div class="editor-card">
  <div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-4">
    <h3 class="fw-bold text-primary m-0">🖋️ إنشاء مقال جديد</h3>
    <button type="submit" form="postForm" class="btn-gradient">📢 نشر المقال</button>
  </div>

  <form id="postForm" method="POST" action="{{ route('admin.posts.store') }}" enctype="multipart/form-data">
    @csrf

    <input type="text" name="title" id="title" class="form-control form-control-lg mb-3 border-0 border-bottom"
           placeholder="أدخل عنوان المقال هنا..." required>

    <label class="form-label fw-semibold mb-1">🖼️ صورة الغلاف</label>
    <input type="file" name="cover" id="coverInput" accept="image/*" class="form-control mb-2">
    <img id="coverPreview" class="img-fluid rounded-3 d-none" alt="preview">

    <label class="form-label fw-semibold mt-4 mb-1">✍️ المحتوى</label>
    <textarea name="body" id="editor"></textarea>

    <div class="row g-3 mt-4">
      <div class="col-md-6">
        <label class="form-label fw-semibold">📂 القسم</label>
        <select class="form-select" name="category_id" required>
          <option value="">اختر القسم</option>
          @foreach($categories as $id => $name)
            <option value="{{ $id }}">{{ $name }}</option>
          @endforeach
        </select>
      </div>
      <div class="col-md-6">
        <label class="form-label fw-semibold">⚙️ الحالة</label>
        <select class="form-select" name="status">
          <option value="draft">مسودة</option>
          <option value="published">منشور</option>
        </select>
      </div>
      <div class="col-12">
        <label class="form-label fw-semibold">🏷️ الوسوم</label>
        <select id="tags" name="tags[]" class="form-select" multiple></select>
        <small class="text-muted">اكتب الوسم واضغط Enter لإضافته أو اختر من الموجود.</small>
      </div>
    </div>

    <div class="text-end mt-4">
      <button class="btn-gradient" type="submit">💾 حفظ المقال</button>
    </div>
  </form>
</div>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/lang/summernote-ar-AR.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function () {
  // معاينة الغلاف
  $('#coverInput').on('change', function(e){
    const f=e.target.files?.[0]; if(!f) return;
    $('#coverPreview').attr('src', URL.createObjectURL(f)).removeClass('d-none');
  });

  // الوسوم
  $('#tags').select2({
    tags:true,
    placeholder:'اختر أو أضف وسومًا...',
    tokenSeparators:[',',' '],
    ajax:{
      url:'{{ route("admin.tags.search") }}',
      dataType:'json', delay:250,
      data:p=>({q:p.term}),
      processResults:d=>({results:d.map(t=>({id:t.id,text:t.name}))})
    },
    createTag:p=>({id:p.term,text:p.term,newTag:true})
  });

  // تعطيل Alt+/ عالميًا (حتى لو حاول المستخدم)
  $(document).on('keydown', function(e){
    if ((e.altKey && (e.key === '/' || e.key === '?')) || (e.ctrlKey && e.shiftKey && e.key === '?')) {
      e.preventDefault(); e.stopPropagation();
      return false;
    }
  });

  // Summernote مع إلغاء الاختصارات + وضع RTL
  $('#editor').summernote({
    placeholder:'ابدأ بكتابة محتوى المقال...',
    height: 500,
    lang: 'ar-AR',
    shortcuts: false,
    disableDragAndDrop: true,
    dialogsInBody: true,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['para',  ['ul', 'ol', 'paragraph']],
      ['insert',['link','picture','video','table']],
      ['view',  ['fullscreen','codeview']]
    ],
    callbacks: {
      onInit: function(){
        // إزالة أي آثار لصفحة المساعدة
        $('.note-help,.note-shortcut,.note-help-dialog,.note-shortcut-dialog').remove();
      }
    }
  });
});
</script>
@endpush