{% extends 'base.html' %}

{% block title %}
    {% if object %}Edit{% else %}Create{% endif %} Notification Template - Optinet Global Links
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h2 class="mb-0">
                        <i class="bi bi-file-text me-3" style="color: var(--accent-blue);"></i>
                        {% if object %}Edit{% else %}Create{% endif %} Notification Template
                    </h2>
                    <p class="text-secondary mt-2 mb-0">
                        {% if object %}Update{% else %}Create a new{% endif %} notification template
                    </p>
                </div>
                <a href="{% url 'notifications:template_list' %}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-2"></i>Back to Templates
                </a>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        {% if object %}Edit Template: {{ object.name }}{% else %}New Template{% endif %}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">Template Name</label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="text-danger mt-1">{{ form.name.errors }}</div>
                                {% endif %}
                            </div>
                            
                            <div class="col-md-4 mb-3">
                                <label for="{{ form.template_type.id_for_label }}" class="form-label">Template Type</label>
                                {{ form.template_type }}
                                {% if form.template_type.errors %}
                                    <div class="text-danger mt-1">{{ form.template_type.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.subject.id_for_label }}" class="form-label">Subject <small class="text-muted">(Email templates only)</small></label>
                            {{ form.subject }}
                            <div class="form-text">{{ form.subject.help_text }}</div>
                            {% if form.subject.errors %}
                                <div class="text-danger mt-1">{{ form.subject.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.content.id_for_label }}" class="form-label">Message Content</label>
                            {{ form.content }}
                            <div class="form-text">{{ form.content.help_text }}</div>
                            {% if form.content.errors %}
                                <div class="text-danger mt-1">{{ form.content.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.variables_help.id_for_label }}" class="form-label">Available Variables</label>
                            {{ form.variables_help }}
                            <div class="form-text">{{ form.variables_help.help_text }}</div>
                            {% if form.variables_help.errors %}
                                <div class="text-danger mt-1">{{ form.variables_help.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                {{ form.is_active }}
                                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                    Template is active
                                </label>
                            </div>
                            {% if form.is_active.errors %}
                                <div class="text-danger mt-1">{{ form.is_active.errors }}</div>
                            {% endif %}
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-2"></i>
                                {% if object %}Update{% else %}Create{% endif %} Template
                            </button>
                            <a href="{% url 'notifications:template_list' %}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Variable Examples -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="mb-0">Common Variables</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">Customer Variables:</h6>
                            <ul class="list-unstyled">
                                <li><code>{{customer_name}}</code> - Customer full name</li>
                                <li><code>{{customer_id}}</code> - Customer ID</li>
                                <li><code>{{phone}}</code> - Customer phone</li>
                                <li><code>{{email}}</code> - Customer email</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-success">Payment Variables:</h6>
                            <ul class="list-unstyled">
                                <li><code>{{amount}}</code> - Payment amount</li>
                                <li><code>{{payment_id}}</code> - Payment reference</li>
                                <li><code>{{payment_method}}</code> - Payment method</li>
                                <li><code>{{date}}</code> - Payment date</li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-info">Ticket Variables:</h6>
                            <ul class="list-unstyled">
                                <li><code>{{ticket_number}}</code> - Ticket number</li>
                                <li><code>{{technician_name}}</code> - Technician name</li>
                                <li><code>{{appointment_date}}</code> - Appointment date</li>
                                <li><code>{{appointment_time}}</code> - Appointment time</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-warning">General Variables:</h6>
                            <ul class="list-unstyled">
                                <li><code>{{company_name}}</code> - Company name</li>
                                <li><code>{{support_phone}}</code> - Support phone</li>
                                <li><code>{{today}}</code> - Current date</li>
                                <li><code>{{time}}</code> - Current time</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Show/hide subject field based on template type
document.getElementById('{{ form.template_type.id_for_label }}').addEventListener('change', function() {
    const subjectDiv = document.getElementById('{{ form.subject.id_for_label }}').closest('.mb-3');
    if (this.value.includes('email')) {
        subjectDiv.style.display = 'block';
    } else {
        subjectDiv.style.display = 'none';
    }
});

// Trigger on page load
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.getElementById('{{ form.template_type.id_for_label }}');
    if (typeSelect.value) {
        typeSelect.dispatchEvent(new Event('change'));
    }
});
</script>
{% endblock %}