@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.update', $post) }}" enctype="multipart/form-data">
    @csrf @method('PUT')

    <input type="text" name="title" id="title" value="{{ old('title', $post->title) }}"
           class="form-control form-control-lg mb-3 border-0 border-bottom" required>

    <label class="form-label fw-semibold mb-1">🖼️ صورة الغلاف</label>
    <input type="file" name="cover" id="coverInput" accept="image/*" class="form-control mb-2">
    @if($post->cover)
      <img id="coverPreview" src="{{ Storage::url($post->cover) }}" class="img-fluid rounded-3 mt-2" alt="cover">
    @else
      <img id="coverPreview" class="img-fluid rounded-3 mt-2 d-none" alt="preview">
    @endif

    <label class="form-label fw-semibold mt-4 mb-1">✍️ المحتوى</label>
    <textarea name="body" id="editor">{{ old('body', $post->body) }}</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 }}" {{ $post->category_id == $id ? 'selected' : '' }}>{{ $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" {{ $post->status == 'draft' ? 'selected' : '' }}>مسودة</option>
          <option value="published" {{ $post->status == 'published' ? 'selected' : '' }}>منشور</option>
        </select>
      </div>
      <div class="col-12">
        <label class="form-label fw-semibold">🏷️ الوسوم</label>
        <select id="tags" name="tags[]" class="form-select" multiple>
          @foreach($post->tags as $tag)
            <option value="{{ $tag->id }}" selected>{{ $tag->name }}</option>
          @endforeach
        </select>
      </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', 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})
  });

  $('#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