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

{% block title %}{{ category_name }} Templates{% endblock %}

{% block stylesheets %}
<style>
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .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;
  }
  
  .templates-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .template-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 20px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
  }
  
  .template-card.is-default {
    border-color: #48bb78;
    background: linear-gradient(135deg, #f0fff4 0%, #fff 100%);
  }
  
  .template-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  }
  
  .template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  
  .template-info {
    flex: 1;
  }
  
  .template-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a365d;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .default-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #48bb78;
    color: #fff;
  }
  
  .template-meta {
    font-size: 12px;
    color: #718096;
    margin-top: 4px;
  }
  
  .template-actions {
    display: flex;
    gap: 8px;
  }
  
  .template-actions .btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
  }
  
  .template-preview {
    background: #f7fafc;
    border-radius: 8px;
    padding: 15px;
    font-size: 13px;
    color: #4a5568;
    white-space: pre-wrap;
    line-height: 1.6;
    max-height: 150px;
    overflow: hidden;
    position: relative;
  }
  
  .template-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, #f7fafc);
  }
  
  .template-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
  }
  
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  }
  
  .empty-state i {
    font-size: 50px;
    color: #cbd5e0;
    margin-bottom: 15px;
  }
  
  .empty-state h4 {
    color: #4a5568;
    margin-bottom: 10px;
  }
  
  .empty-state p {
    color: #718096;
    margin-bottom: 20px;
  }

  /* Delete Confirmation Modal */
  .delete-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }
  
  .delete-modal-overlay.active {
    display: flex;
  }
  
  .delete-modal {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
  }
  
  .delete-modal h4 {
    color: #c53030;
    margin-bottom: 15px;
  }
  
  .delete-modal p {
    color: #4a5568;
    margin-bottom: 25px;
  }
  
  .delete-modal .btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
</style>
{% endblock %}

{% block heading %}{{ category_name }} Templates{% endblock %}

{% block content %}

<!-- Delete Confirmation Modal -->
<div class="delete-modal-overlay" id="deleteModal">
  <div class="delete-modal">
    <h4><i class="fas fa-exclamation-triangle mr-2"></i>Delete Template?</h4>
    <p>Are you sure you want to delete "<span id="deleteTemplateName"></span>"? This action cannot be undone.</p>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">Cancel</button>
      <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
        <i class="fas fa-trash mr-1"></i>Delete
      </button>
    </div>
  </div>
</div>

<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>{{ category_name }} Templates</h2>
      <div class="breadcrumb-link">
        <a href="{% url 'pos:whatsapp_templates_categories' %}">
          <i class="fas fa-arrow-left mr-1"></i>All Categories
        </a>
      </div>
    </div>
  </div>
  
  <a href="{% url 'pos:whatsapp_template_add' category_key %}" class="btn btn-success">
    <i class="fas fa-plus mr-1"></i>Add New Template
  </a>
</div>

{% if templates %}
<div class="templates-list">
  {% for template in templates %}
  <div class="template-card {% if template.is_default %}is-default{% endif %}" data-id="{{ template.id }}">
    <div class="template-header">
      <div class="template-info">
        <div class="template-name">
          {{ template.name }}
          {% if template.is_default %}
          <span class="default-badge">
            <i class="fas fa-check"></i> Default
          </span>
          {% endif %}
        </div>
        <div class="template-meta">
          Last updated: {{ template.updated_at|date:"d M, Y H:i" }}
        </div>
      </div>
    </div>
    
    <div class="template-preview">{{ template.template_text }}</div>
    
    <div class="template-footer">
      {% if not template.is_default %}
      <button type="button" 
              class="btn btn-outline-success btn-sm set-default-btn"
              data-id="{{ template.id }}"
              data-name="{{ template.name }}">
        <i class="fas fa-check-circle mr-1"></i>Set as Default
      </button>
      {% endif %}
      
      <a href="{% url 'pos:whatsapp_template_edit' template.id %}" 
         class="btn btn-outline-primary btn-sm">
        <i class="fas fa-edit mr-1"></i>Edit
      </a>
      
      <button type="button" 
              class="btn btn-outline-danger btn-sm delete-btn"
              data-id="{{ template.id }}"
              data-name="{{ template.name }}">
        <i class="fas fa-trash mr-1"></i>Delete
      </button>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="empty-state">
  <i class="fas fa-file-alt"></i>
  <h4>No Templates Yet</h4>
  <p>Create your first {{ category_name|lower }} template to get started.</p>
  <a href="{% url 'pos:whatsapp_template_add' category_key %}" class="btn btn-success">
    <i class="fas fa-plus mr-1"></i>Add Template
  </a>
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
const csrftoken = '{{ csrf_token }}';
let pendingDeleteId = null;

// Delete Modal Functions
function openDeleteModal(id, name) {
  pendingDeleteId = id;
  document.getElementById('deleteTemplateName').textContent = name;
  document.getElementById('deleteModal').classList.add('active');
}

function closeDeleteModal() {
  pendingDeleteId = null;
  document.getElementById('deleteModal').classList.remove('active');
}

// Set Default Handler
document.querySelectorAll('.set-default-btn').forEach(btn => {
  btn.addEventListener('click', async function() {
    const id = this.dataset.id;
    const name = this.dataset.name;
    
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Setting...';
    
    try {
      const resp = await fetch(`/whatsapp-templates/set-default/${id}/`, {
        method: 'POST',
        headers: {
          'X-CSRFToken': csrftoken,
          'X-Requested-With': 'XMLHttpRequest'
        }
      });
      
      const data = await resp.json();
      
      if (data.ok) {
        window.location.reload();
      } else {
        alert(data.error || 'Failed to set default');
        this.disabled = false;
        this.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Set as Default';
      }
    } catch (err) {
      console.error(err);
      alert('Error setting default template');
      this.disabled = false;
      this.innerHTML = '<i class="fas fa-check-circle mr-1"></i>Set as Default';
    }
  });
});

// Delete Button Handler
document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    openDeleteModal(this.dataset.id, this.dataset.name);
  });
});

// Confirm Delete Handler
document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
  if (!pendingDeleteId) return;
  
  this.disabled = true;
  this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Deleting...';
  
  try {
    const resp = await fetch(`/whatsapp-templates/delete/${pendingDeleteId}/`, {
      method: 'POST',
      headers: {
        'X-CSRFToken': csrftoken,
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
    
    const data = await resp.json();
    
    if (data.ok) {
      window.location.reload();
    } else {
      alert(data.error || 'Failed to delete template');
      closeDeleteModal();
      this.disabled = false;
      this.innerHTML = '<i class="fas fa-trash mr-1"></i>Delete';
    }
  } catch (err) {
    console.error(err);
    alert('Error deleting template');
    closeDeleteModal();
    this.disabled = false;
    this.innerHTML = '<i class="fas fa-trash mr-1"></i>Delete';
  }
});

// Close modal on overlay click
document.getElementById('deleteModal').addEventListener('click', function(e) {
  if (e.target === this) closeDeleteModal();
});

// Close on Escape
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeDeleteModal();
});
</script>
{% endblock %}