{% extends "pos/base.html" %}
{% load static %}

{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Template{% endblock %}

{% block stylesheets %}
<style>
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
  }
  
  .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .page-title .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
  }
  
  .page-title h2 {
    margin: 0;
    color: #1a365d;
    font-size: 22px;
  }
  
  .page-title .breadcrumb-link {
    font-size: 13px;
    color: #718096;
  }
  
  .page-title .breadcrumb-link a {
    color: #3182ce;
  }
  
  .form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  
  @media (max-width: 992px) {
    .form-container {
      grid-template-columns: 1fr;
    }
  }
  
  .form-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 25px;
  }
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a365d;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .section-title i {
    color: #3182ce;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 6px;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
  }
  
  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
  }
  
  .form-group textarea {
    min-height: 250px;
    resize: vertical;
    font-family: 'Courier New', monospace;
    line-height: 1.6;
  }
  
  .placeholders-box {
    background: #f7fafc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .placeholders-title {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 10px;
  }
  
  .placeholders-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .placeholder-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Courier New', monospace;
  }
  
  .placeholder-chip:hover {
    background: #ebf8ff;
    border-color: #3182ce;
    color: #3182ce;
  }
  
  .placeholder-chip .sample {
    font-size: 10px;
    color: #a0aec0;
    font-family: Arial, sans-serif;
  }
  
  .preview-section {
    position: sticky;
    top: 20px;
  }
  
  .preview-box {
    background: #f0fff4;
    border: 2px solid #9ae6b4;
    border-radius: 10px;
    padding: 20px;
    min-height: 300px;
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.7;
    color: #2d3748;
  }
  
  .preview-empty {
    text-align: center;
    color: #a0aec0;
    padding: 50px 20px;
  }
  
  .preview-empty i {
    font-size: 40px;
    margin-bottom: 10px;
  }
  
  .form-check-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f7fafc;
    border-radius: 8px;
  }
  
  .form-check-custom input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  
  .form-check-custom label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
  }
  
  .form-check-custom .help-text {
    font-size: 12px;
    color: #718096;
    margin-top: 2px;
  }
  
  .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
  }
  
  .form-actions .btn {
    padding: 10px 25px;
    font-size: 14px;
    border-radius: 8px;
  }
  
  .whatsapp-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #9ae6b4;
  }
  
  .whatsapp-preview-header i {
    font-size: 24px;
    color: #25D366;
  }
  
  .whatsapp-preview-header span {
    font-weight: 600;
    color: #2d3748;
  }
</style>
{% endblock %}

{% block heading %}{% if is_edit %}Edit{% else %}Add{% endif %} Template{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-title">
    <div class="icon-box" style="background: {{ category_color }};">
      <i class="fas {{ category_icon }}"></i>
    </div>
    <div>
      <h2>{% if is_edit %}Edit{% else %}Add New{% endif %} {{ category_name }} Template</h2>
      <div class="breadcrumb-link">
        <a href="{% url 'pos:whatsapp_templates_list' category_key %}">
          <i class="fas fa-arrow-left mr-1"></i>Back to {{ category_name }} Templates
        </a>
      </div>
    </div>
  </div>
</div>

<form method="post" id="templateForm">
  {% csrf_token %}
  
  <div class="form-container">
    <!-- Left Side: Form -->
    <div class="form-section">
      <div class="section-title">
        <i class="fas fa-edit"></i>
        Template Details
      </div>
      
      <div class="form-group">
        <label for="name">Template Name *</label>
        <input type="text" 
               id="name" 
               name="name" 
               value="{% if template %}{{ template.name }}{% endif %}"
               placeholder="e.g., Urdu Formal Receipt"
               required>
      </div>
      
      <div class="placeholders-box">
        <div class="placeholders-title">
          <i class="fas fa-code mr-1"></i>Available Placeholders (Click to Insert)
        </div>
        <div class="placeholders-grid">
          {% for ph in placeholders %}
          <span class="placeholder-chip" data-placeholder="{{ ph.key }}">
            {{ ph.key }}
            <span class="sample">{{ ph.sample }}</span>
          </span>
          {% endfor %}
        </div>
      </div>
      
      <div class="form-group">
        <label for="template_text">Template Text *</label>
        <textarea id="template_text" 
                  name="template_text" 
                  placeholder="Enter your message template here..."
                  required>{% if template %}{{ template.template_text }}{% endif %}</textarea>
      </div>
      
      <div class="form-group">
        <div class="form-check-custom">
          <input type="checkbox" 
                 id="is_default" 
                 name="is_default" 
                 value="1"
                 {% if template and template.is_default %}checked{% endif %}>
          <div>
            <label for="is_default">Set as Default Template</label>
            <div class="help-text">This template will be used automatically when sending messages.</div>
          </div>
        </div>
      </div>
      
      <div class="form-actions">
        <button type="submit" class="btn btn-success">
          <i class="fas fa-save mr-1"></i>
          {% if is_edit %}Update{% else %}Save{% endif %} Template
        </button>
        <a href="{% url 'pos:whatsapp_templates_list' category_key %}" class="btn btn-secondary">
          Cancel
        </a>
      </div>
    </div>
    
    <!-- Right Side: Live Preview -->
    <div class="form-section preview-section">
      <div class="section-title">
        <i class="fab fa-whatsapp" style="color: #25D366;"></i>
        Live Preview
      </div>
      
      <div class="whatsapp-preview-header">
        <i class="fab fa-whatsapp"></i>
        <span>WhatsApp Message Preview</span>
      </div>
      
      <div class="preview-box" id="previewBox">
        <div class="preview-empty">
          <i class="fas fa-eye"></i>
          <p>Start typing to see preview...</p>
        </div>
      </div>
    </div>
  </div>
</form>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const templateTextarea = document.getElementById('template_text');
  const previewBox = document.getElementById('previewBox');
  
  // Sample data for preview
  const sampleData = {
    {% for ph in placeholders %}
    '{{ ph.key }}': '{{ ph.sample }}',
    {% endfor %}
  };
  
  // Update preview function
  function updatePreview() {
    let text = templateTextarea.value.trim();
    
    if (!text) {
      previewBox.innerHTML = `
        <div class="preview-empty">
          <i class="fas fa-eye"></i>
          <p>Start typing to see preview...</p>
        </div>
      `;
      return;
    }
    
    // Replace placeholders with sample values
    for (const [placeholder, value] of Object.entries(sampleData)) {
      text = text.split(placeholder).join(value);
    }
    
    // Escape HTML but keep line breaks
    text = text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
    
    // Convert *bold* to actual bold
    text = text.replace(/\*([^*]+)\*/g, '<strong>$1</strong>');
    
    // Convert _italic_ to actual italic
    text = text.replace(/_([^_]+)_/g, '<em>$1</em>');
    
    previewBox.innerHTML = text;
  }
  
  // Listen for input changes
  templateTextarea.addEventListener('input', updatePreview);
  
  // Initial preview
  updatePreview();
  
  // Placeholder chip click to insert
  document.querySelectorAll('.placeholder-chip').forEach(chip => {
    chip.addEventListener('click', function() {
      const placeholder = this.dataset.placeholder;
      const cursorPos = templateTextarea.selectionStart;
      const textBefore = templateTextarea.value.substring(0, cursorPos);
      const textAfter = templateTextarea.value.substring(cursorPos);
      
      templateTextarea.value = textBefore + placeholder + textAfter;
      templateTextarea.focus();
      templateTextarea.selectionStart = templateTextarea.selectionEnd = cursorPos + placeholder.length;
      
      updatePreview();
    });
  });
  
  // Form validation
  document.getElementById('templateForm').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    const text = templateTextarea.value.trim();
    
    if (!name || !text) {
      e.preventDefault();
      alert('Please fill in all required fields.');
      return false;
    }
  });
});
</script>
{% endblock %}