@extends('admin.layouts.admin')

@section('title', 'New Post - SIVILIMA Admin')
@section('breadcrumb_title', 'New Post')
@section('breadcrumb')
  <li class="breadcrumb-item"><a href="{{ route('admin.blog.index') }}">Blog</a></li>
  <li class="breadcrumb-item active">New</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.store') }}" enctype="multipart/form-data" id="postForm">
          @csrf
          <input type="hidden" name="content" id="contentInput">
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label">Title *</label>
              <input type="text" name="title" class="form-control" 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" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Category</label>
              <select name="category" class="form-select">
                <option value="guide">Buying Guides</option>
                <option value="tech">Material Science</option>
                <option value="design">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" placeholder="5 min read">
            </div>
            <div class="col-md-4">
              <label class="form-label">Published Date</label>
              <input type="date" name="published_at" class="form-control" value="{{ date('Y-m-d') }}">
            </div>
            <div class="col-12">
              <label class="form-label">Excerpt</label>
              <textarea name="excerpt" class="form-control" rows="2" placeholder="Short summary for preview cards..."></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>
              <input type="file" name="image" class="form-control" accept="image/*">
              <small class="text-muted">JPG, PNG, WebP - Max 5MB</small>
            </div>
            <div class="col-md-3">
              <label class="form-label">Sort Order</label>
              <input type="number" name="sort_order" class="form-control" value="0">
            </div>
            <div class="col-md-3">
              <label class="form-label">Status</label>
              <select name="is_published" class="form-select">
                <option value="1">Published</option>
                <option value="0">Draft</option>
              </select>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary px-4">Publish 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 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...'
});

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