@extends('layouts.admin')
@section('page_title', isset($page)?'Edit Page':'New Page')
@section('content')
<div class="card">
  <div class="card-header">
    <h3>{{ isset($page)?'Edit Page: '.$page->title:'Create New Page' }}</h3>
    <div style="display:flex;gap:8px">
      @if(isset($page))<a href="{{ url('/page/'.$page->slug) }}" target="_blank" class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> Preview</a>@endif
      <a href="{{ route('admin.pages.index') }}" class="btn btn-sm btn-outline"><i class="fas fa-arrow-left"></i> Back</a>
    </div>
  </div>
  <div class="card-body">
    <form method="POST" action="{{ isset($page)?route('admin.pages.update',$page->id):route('admin.pages.store') }}">
      @csrf @if(isset($page)) @method('PUT') @endif
      <div style="display:grid;grid-template-columns:2fr 1fr;gap:24px">
        <div>
          <div class="form-group"><label>Page Title (English) *</label><input type="text" name="title" class="form-control" value="{{ $page->title??'' }}" required></div>
          <div class="form-group"><label>Page Title (Bengali)</label><input type="text" name="title_bn" class="form-control" value="{{ $page->title_bn??'' }}"></div>
          <div class="form-group">
            <label>Content (HTML/English) *</label>
            <div class="editor-wrap">
              <div class="editor-toolbar">
                <button type="button" class="editor-btn" onclick="fmt('bold')"><b>B</b></button>
                <button type="button" class="editor-btn" onclick="fmt('italic')"><i>I</i></button>
                <button type="button" class="editor-btn" onclick="fmt('underline')"><u>U</u></button>
                <button type="button" class="editor-btn" onclick="insertTag('h2')">H2</button>
                <button type="button" class="editor-btn" onclick="insertTag('h3')">H3</button>
                <button type="button" class="editor-btn" onclick="insertTag('p')">P</button>
                <button type="button" class="editor-btn" onclick="insertTag('ul')">UL</button>
                <button type="button" class="editor-btn" onclick="insertTag('li')">LI</button>
              </div>
              <div class="editor-area" id="contentEditor" contenteditable="true">{!! $page->content??'' !!}</div>
            </div>
            <input type="hidden" name="content" id="contentInput">
          </div>
          <div class="form-group"><label>Content (Bengali)</label><textarea name="content_bn" class="form-control" style="min-height:150px">{{ $page->content_bn??'' }}</textarea></div>
        </div>
        <div>
          <div class="form-group"><label>URL Slug</label><input type="text" name="slug" class="form-control" value="{{ $page->slug??'' }}" placeholder="auto-generated"><div class="form-hint">Leave blank to auto-generate</div></div>
          <div class="form-group"><label>Status</label><select name="is_active" class="form-control"><option value="1" {{ ($page->is_active??1)==1?'selected':'' }}>Active</option><option value="0" {{ ($page->is_active??1)==0?'selected':'' }}>Inactive</option></select></div>
          <div class="form-group"><label>Meta Title</label><input type="text" name="meta_title" class="form-control" value="{{ $page->meta_title??'' }}"></div>
          <div class="form-group"><label>Meta Description</label><textarea name="meta_description" class="form-control" style="min-height:80px">{{ $page->meta_description??'' }}</textarea></div>
          <div class="form-group"><label>Meta Keywords</label><input type="text" name="meta_keywords" class="form-control" value="{{ $page->meta_keywords??'' }}"></div>
          <button type="submit" class="btn btn-primary btn-lg" style="width:100%"><i class="fas fa-save"></i> Save Page</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection
@section('scripts')
<script>
function fmt(cmd){document.execCommand(cmd,false,null);}
function insertTag(tag){const sel=window.getSelection();if(sel.rangeCount){const r=sel.getRangeAt(0);const el=document.createElement(tag);el.appendChild(r.extractContents());r.insertNode(el);}}
document.querySelector('form').addEventListener('submit',function(){document.getElementById('contentInput').value=document.getElementById('contentEditor').innerHTML;});
</script>
@endsection