@extends('layouts.admin')
@section('page_title', isset($blog)?'Edit Post':'New Post')
@section('content')
<div class="card">
  <div class="card-header">
    <h3>{{ isset($blog)?'Edit: '.Str::limit($blog->title,40):'Write New Blog Post' }}</h3>
    <a href="{{ route('admin.blog.index') }}" class="btn btn-sm btn-outline"><i class="fas fa-arrow-left"></i> Back</a>
  </div>
  <div class="card-body">
    <form method="POST" action="{{ isset($blog)?route('admin.blog.update',$blog->id):route('admin.blog.store') }}" enctype="multipart/form-data">
      @csrf @if(isset($blog)) @method('PUT') @endif
      <div style="display:grid;grid-template-columns:2fr 1fr;gap:24px">
        <div>
          <div class="form-group"><label>Title (English) *</label><input type="text" name="title" class="form-control" value="{{ $blog->title??'' }}" required></div>
          <div class="form-group"><label>Title (Bengali)</label><input type="text" name="title_bn" class="form-control" value="{{ $blog->title_bn??'' }}"></div>
          <div class="form-group"><label>Excerpt / Summary</label><textarea name="excerpt" class="form-control" style="min-height:70px" placeholder="Short summary shown in listings...">{{ $blog->excerpt??'' }}</textarea></div>
          <div class="form-group">
            <label>Content *</label>
            <div class="editor-wrap">
              <div class="editor-toolbar">
                <button type="button" class="editor-btn" onclick="document.execCommand('bold')"><b>B</b></button>
                <button type="button" class="editor-btn" onclick="document.execCommand('italic')"><i>I</i></button>
                <button type="button" class="editor-btn" onclick="document.execCommand('underline')"><u>U</u></button>
                <button type="button" class="editor-btn" onclick="wrapTag('h2')">H2</button>
                <button type="button" class="editor-btn" onclick="wrapTag('h3')">H3</button>
                <button type="button" class="editor-btn" onclick="wrapTag('p')">P</button>
                <button type="button" class="editor-btn" onclick="document.execCommand('insertUnorderedList')">UL</button>
                <button type="button" class="editor-btn" onclick="document.execCommand('insertOrderedList')">OL</button>
                <button type="button" class="editor-btn" onclick="insertLink()">🔗</button>
              </div>
              <div class="editor-area" id="blogEditor" contenteditable="true">{!! $blog->content??'' !!}</div>
            </div>
            <input type="hidden" name="content" id="blogContentInput">
          </div>
        </div>
        <div>
          <div class="form-group"><label>Featured Image</label>
            @if(isset($blog) && $blog->featured_image)<img src="{{ asset($blog->featured_image) }}" style="width:100%;border-radius:8px;margin-bottom:8px">@endif
            <input type="file" name="featured_image" class="form-control" accept="image/*">
          </div>
          <div class="form-group"><label>Category</label><select name="category_id" class="form-control"><option value="">-- None --</option>@foreach($categories as $c)<option value="{{ $c->id }}" {{ ($blog->category_id??'')==$c->id?'selected':'' }}>{{ $c->name }}</option>@endforeach</select></div>
          <div class="form-group"><label>Author</label><input type="text" name="author" class="form-control" value="{{ $blog->author??'X Hosting BD Team' }}"></div>
          <div class="form-group"><label>Status</label><select name="is_published" class="form-control"><option value="0" {{ ($blog->is_published??0)==0?'selected':'' }}>Draft</option><option value="1" {{ ($blog->is_published??0)==1?'selected':'' }}>Published</option></select></div>
          <div style="border-top:1px solid var(--border);padding-top:16px;margin-top:8px">
            <div class="form-group"><label>Meta Title</label><input type="text" name="meta_title" class="form-control" value="{{ $blog->meta_title??'' }}"></div>
            <div class="form-group"><label>Meta Description</label><textarea name="meta_description" class="form-control" style="min-height:70px">{{ $blog->meta_description??'' }}</textarea></div>
          </div>
          <button type="submit" class="btn btn-primary btn-lg" style="width:100%;margin-top:8px"><i class="fas fa-save"></i> Save Post</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection
@section('scripts')
<script>
function wrapTag(tag){const el=document.createElement(tag);const sel=window.getSelection();if(sel.rangeCount){const r=sel.getRangeAt(0);el.appendChild(r.extractContents());r.insertNode(el);}}
function insertLink(){const url=prompt('URL:');if(url)document.execCommand('createLink',false,url);}
document.querySelector('form').addEventListener('submit',function(){document.getElementById('blogContentInput').value=document.getElementById('blogEditor').innerHTML;});
</script>
@endsection