{% extends "pos/base.html" %}
{% block title %}{% if instance %}Edit{% else %}Add New{% endif %} Invoice Template{% endblock %}

{% block content %}
<div class="container my-4">
  <h1>{% if instance %}Edit{% else %}Add New{% endif %} Invoice Template</h1>
  <form method="post">{% csrf_token %}

    <div class="mb-3">
      <label for="id_name">Name:</label>
      <input type="text" name="name" id="id_name"
             class="form-control"
             value="{{ instance.name|default:'' }}">
    </div>

    <div class="mb-3">
      <label for="jsoneditor">Init Config (JSON)</label>
      <div id="jsoneditor" style="height:400px; border:1px solid #ccc;"></div>
      <textarea id="id_init_config" name="init_config" hidden>{{ default_json }}</textarea>
    </div>

    <button type="button" id="preview-btn" class="btn btn-secondary">Preview</button>
    <button type="submit" class="btn btn-success">Save</button>
  </form>
</div>

{% endblock %}
{% block javascripts %}
<script>

document.addEventListener('DOMContentLoaded', function(){
  const container = document.getElementById('jsoneditor');
  const textarea  = document.getElementById('id_init_config');
  const editor    = new JSONEditor(container, {mode:'tree', modes:['code','tree']});

  // Beautify & load
  try { editor.set(JSON.parse(textarea.value.trim())); }
  catch { editor.set({}); }

  if (editor.expandAll) editor.expandAll();

  // Sync on submit
  container.closest('form').addEventListener('submit', ()=>{
    textarea.value = JSON.stringify(editor.get(), null, 2);
  });

  // Sync on Preview + open
  document.getElementById('preview-btn').addEventListener('click', ()=>{
    textarea.value = JSON.stringify(editor.get(), null, 2);
    const cfg = encodeURIComponent(textarea.value);
    window.open("{% url 'invoices:invoice_template_preview' %}?config=" + cfg, "_blank");
  });
});
</script>
{% endblock %}