@extends('admin.layouts.admin')

@section('title', 'Edit Post - SIVILIMA Admin')
@section('breadcrumb_title', 'Edit Post')
@section('breadcrumb')
  <li class="breadcrumb-item"><a href="{{ route('admin.blog.index') }}">Blog</a></li>
  <li class="breadcrumb-item active">{{ $post->title }}</li>
@endsection

@section('content')
<div class="row">
  <div class="col-12 col-lg-9">
    <div class="card">
      <div class="card-body">
        <form method="POST" action="{{ route('admin.blog.update', $post) }}" enctype="multipart/form-data" id="postForm">
          @csrf @method('PUT')
          <input type="hidden" name="content" id="contentInput" value="{{ old('content', $post->content) }}">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label">Title *</label>
              <input type="text" name="title" class="form-control" value="{{ old('title', $post->title) }}" required oninput="this.form.slug.value = this.value.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'')">
            </div>
            <div class="col-md-4">
              <label class="form-label">Slug *</label>
              <input type="text" name="slug" class="form-control" value="{{ old('slug', $post->slug) }}" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Category</label>
              <select name="category" class="form-select">
                <option value="guide" {{ old('category', $post->category) === 'guide' ? 'selected' : '' }}>Buying Guides</option>
                <option value="tech" {{ old('category', $post->category) === 'tech' ? 'selected' : '' }}>Material Science</option>
                <option value="design" {{ old('category', $post->category) === 'design' ? 'selected' : '' }}>Interior Design</option>
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Read Time</label>
              <input type="text" name="read_time" class="form-control" value="{{ old('read_time', $post->read_time) }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Published Date</label>
              <input type="date" name="published_at" class="form-control" value="{{ old('published_at', $post->published_at?->format('Y-m-d')) }}">
            </div>
            <div class="col-12">
              <label class="form-label">Excerpt</label>
              <textarea name="excerpt" class="form-control" rows="2">{{ old('excerpt', $post->excerpt) }}</textarea>
            </div>
            <div class="col-12">
              <label class="form-label">Content</label>
              <div id="quillEditor" style="height:400px;background:#fff;"></div>
              <small class="text-muted mt-2">Tip: Highlight text and use the toolbar for headings, bold, lists, links, and images.</small>
            </div>
            <div class="col-md-6">
              <label class="form-label">Featured Image</label>
              @if($post->image)
                <div class="mb-2">
                  <img src="{{ Str::startsWith($post->image, 'blog/') ? asset('storage/' . $post->image) : asset($post->image) }}" style="width:120px;height:70px;object-fit:cover;border-radius:5px;border:1px solid #ddd;">
                  <small class="d-block text-muted">Current image</small>
                </div>
              @endif
              <input type="file" name="image" class="form-control" accept="image/*">
              <small class="text-muted">Leave empty to keep current</small>
            </div>
            <div class="col-md-3">
              <label class="form-label">Sort Order</label>
              <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $post->sort_order) }}">
            </div>
            <div class="col-md-3">
              <label class="form-label">Status</label>
              <select name="is_published" class="form-select">
                <option value="1" {{ old('is_published', $post->is_published) ? 'selected' : '' }}>Published</option>
                <option value="0" {{ !old('is_published', $post->is_published) ? 'selected' : '' }}>Draft</option>
              </select>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary px-4">Update Post</button>
              <a href="{{ route('admin.blog.index') }}" class="btn btn-light px-4">Cancel</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
var existingContent = document.getElementById('contentInput').value;

var quill = new Quill('#quillEditor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, 4, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      ['blockquote', 'code-block'],
      ['link', 'image'],
      ['clean']
    ]
  },
  placeholder: 'Write your article content here...'
});

if (existingContent) {
  quill.root.innerHTML = existingContent;
}

document.getElementById('postForm').addEventListener('submit', function(e) {
  document.getElementById('contentInput').value = quill.root.innerHTML;
});
</script>
@endpush