@extends('layouts.app')
@section('title','ویرایش قالب')
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  <div class="lg:col-span-2 bg-white rounded-lg shadow p-4 text-sm">
    <h1 class="font-bold mb-3">{{ $template->name }} <span class="text-gray-400 font-normal">v{{ $template->version ?? 1 }}</span></h1>
    <form method="POST" action="{{ route('settings.templates.update', $template->id) }}" class="space-y-3">@csrf @method('PUT')
      <div>
        <label class="block mb-1">نام</label>
        <input name="name" value="{{ $template->name }}" required class="w-full border rounded px-3 py-2">
      </div>
      <div>
        <label class="block mb-1">سربرگ</label>
        <textarea name="header" id="tpl-header" rows="3" class="w-full border rounded px-3 py-2 font-mono text-xs">{{ $template->header }}</textarea>
      </div>
      <div>
        <label class="block mb-1">بدنه (ویرایشگر غنی)</label>
        <div id="toolbar" class="border rounded-t px-2 py-1 bg-gray-50 flex gap-1 flex-wrap text-xs">
          <button type="button" data-cmd="bold" class="px-2 py-1 border rounded"><b>B</b></button>
          <button type="button" data-cmd="italic" class="px-2 py-1 border rounded"><i>I</i></button>
          <button type="button" data-cmd="underline" class="px-2 py-1 border rounded"><u>U</u></button>
          <button type="button" data-cmd="insertUnorderedList" class="px-2 py-1 border rounded">• لیست</button>
          <button type="button" id="btn-html" class="px-2 py-1 border rounded">HTML</button>
        </div>
        <div id="editor" class="border border-t-0 rounded-b min-h-[200px] p-3" contenteditable="true">{!! $template->body !!}</div>
        <textarea name="body" id="tpl-body" class="hidden">{{ $template->body }}</textarea>
      </div>
      <div>
        <label class="block mb-1">پاورقی</label>
        <textarea name="footer" rows="2" class="w-full border rounded px-3 py-2 font-mono text-xs">{{ $template->footer }}</textarea>
      </div>
      <div>
        <label class="block mb-1">یادداشت نسخه</label>
        <input name="change_note" class="w-full border rounded px-3 py-2" placeholder="توضیح تغییرات این نسخه">
      </div>
      <label class="flex gap-2"><input type="checkbox" name="is_default" value="1" @checked($template->is_default)> قالب پیش‌فرض این نوع</label>
      <button class="bg-blue-600 text-white px-4 py-2 rounded">ذخیره نسخه جدید</button>
    </form>
  </div>
  <div class="space-y-4">
    <div class="bg-white rounded-lg shadow p-4 text-sm">
      <h2 class="font-semibold mb-2">کتابخانه Placeholder</h2>
      <p class="text-xs text-gray-500 mb-2">روی هر مورد کلیک کنید تا در بدنه درج شود.</p>
      @foreach($placeholders as $group)
        <div class="mb-2">
          <div class="text-xs font-bold text-gray-500">{{ $group['label'] }}</div>
          @foreach($group['items'] as $key => $label)
            <button type="button" class="ph-btn block w-full text-right text-xs border-b py-1 hover:bg-blue-50" data-ph="{{ '{{'.$key.'}}' }}">
              <code class="text-blue-700">{{ '{{'.$key.'}}' }}</code> — {{ $label }}
            </button>
          @endforeach
        </div>
      @endforeach
    </div>
    <div class="bg-white rounded-lg shadow p-4 text-sm">
      <h2 class="font-semibold mb-2">تاریخچه نسخه‌ها</h2>
      @forelse($versions as $v)
        <div class="border-b py-2 text-xs">
          <div>v{{ $v->version_number }} — {{ \Illuminate\Support\Str::limit($v->change_note, 40) }}</div>
          <form method="POST" action="{{ route('settings.templates.version.restore', [$template->id, $v->id]) }}" class="mt-1">@csrf
            <button class="text-blue-600">بازیابی این نسخه</button>
          </form>
        </div>
      @empty
        <p class="text-gray-500 text-xs">نسخه‌ای نیست</p>
      @endforelse
    </div>
  </div>
</div>
<script>
(function(){
  const editor = document.getElementById('editor');
  const body = document.getElementById('tpl-body');
  const form = body.closest('form');
  document.querySelectorAll('#toolbar [data-cmd]').forEach(btn=>{
    btn.addEventListener('click', e=>{ e.preventDefault(); document.execCommand(btn.dataset.cmd, false, null); });
  });
  document.getElementById('btn-html').addEventListener('click', e=>{
    e.preventDefault();
    const raw = prompt('HTML بدنه', editor.innerHTML);
    if(raw!==null) editor.innerHTML = raw;
  });
  form.addEventListener('submit', ()=>{ body.value = editor.innerHTML; });
  document.querySelectorAll('.ph-btn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      const ph = btn.dataset.ph;
      editor.focus();
      document.execCommand('insertText', false, ph);
    });
  });
})();
</script>
@endsection