{% extends 'admin/base_admin.html' %}

{% block title %}
    {% if object %}Edit Custom Form{% else %}Create Custom Form{% endif %} | ChatLab
{% endblock %}
{% block admin_forms_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">{% if object %}Edit Custom Form{% else %}Create Custom Form{% endif %}</h2>
        <p class="page-subtitle">Configure the form details and trigger parameter fields.</p>
    </div>
    <a href="{% url 'admin_form_list' %}" class="btn btn-secondary">
        &larr; Back to Forms
    </a>
</div>

<div class="glass-card form-container" style="padding: 1.5rem; margin-top: 1rem; max-width: 950px; width: 100%;">
    <form method="post">
        {% csrf_token %}
        
        <div class="admin-grid-2col">
            <!-- Left Column: Form Details -->
            <div>
                <h3 style="font-family: var(--font-heading); font-size: 1.2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1.5rem;">Form Details</h3>
                
                <div class="form-group">
                    <label for="id_title" class="form-label">Form Title</label>
                    <input type="text" name="title" id="id_title" class="form-input" placeholder="e.g. Order Form" required value="{% if object %}{{ object.title }}{% endif %}">
                    <span style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
                        A descriptive title for this form.
                    </span>
                </div>
                
                <div class="form-group" style="margin-top: 1.5rem;">
                    <label for="id_keyword" class="form-label">Trigger Keyword</label>
                    <input type="text" name="keyword" id="id_keyword" class="form-input" placeholder="e.g. order" required value="{% if object %}{{ object.keyword }}{% endif %}">
                    <span style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
                        When a visitor mentions this keyword in the chat, the bot will start collecting form fields.
                    </span>
                </div>

                <div class="form-group" style="flex-direction: row; align-items: center; gap: 0.5rem; margin-top: 2rem; margin-bottom: 1.5rem;">
                    <input type="checkbox" name="is_shared" id="id_is_shared" {% if object.is_shared %}checked{% endif %} style="width: 18px; height: 18px; cursor: pointer;">
                    <label for="id_is_shared" class="form-label" style="margin-bottom: 0; cursor: pointer; color: var(--text-primary); font-weight: 500;">Share submissions with agents</label>
                </div>
            </div>

            <!-- Right Column: Parameter Fields -->
            <div>
                <h3 style="font-family: var(--font-heading); font-size: 1.2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1.5rem;">Form Parameter Fields</h3>
                
                <div class="form-group">
                    <span style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1rem; display: block;">
                        Add parameter fields that the chatbot should collect step-by-step from the visitor.
                    </span>
                    
                    <div id="fields-container">
                        {% if object %}
                            {% for field in object.fields.all %}
                                <div class="field-row" style="display: flex; gap: 0.75rem; margin-bottom: 0.75rem; align-items: center;">
                                    <input type="text" name="fields" class="form-input" style="flex: 1;" value="{{ field.name }}" required placeholder="e.g. Product Name">
                                    <button type="button" class="btn btn-secondary remove-field-btn" style="padding: 0.75rem; color: var(--danger-red); border-color: rgba(250, 56, 62, 0.2);">&times;</button>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="field-row" style="display: flex; gap: 0.75rem; margin-bottom: 0.75rem; align-items: center;">
                                <input type="text" name="fields" class="form-input" style="flex: 1;" required placeholder="e.g. Contact Name">
                                <button type="button" class="btn btn-secondary remove-field-btn" style="padding: 0.75rem; color: var(--danger-red); border-color: rgba(250, 56, 62, 0.2);">&times;</button>
                            </div>
                        {% endif %}
                    </div>
                    
                    <button type="button" id="add-field-btn" class="btn btn-secondary" style="width: 100%; margin-top: 0.5rem; border-style: dashed; border-color: var(--primary-blue);">
                        + Add Parameter Field
                    </button>
                </div>
            </div>
        </div>
        
        <div class="form-actions" style="margin-top: 2.5rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
            <button type="submit" class="btn btn-primary">
                Save Custom Form
            </button>
            <a href="{% url 'admin_form_list' %}" class="btn btn-secondary">
                Cancel
            </a>
        </div>
    </form>
</div>

<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<style>
.tagify {
    --tags-border-color: var(--border-color);
    --tags-hover-border-color: var(--primary-blue);
    --tags-focus-border-color: var(--primary-blue);
    --tag-bg: rgba(0, 132, 255, 0.1);
    --tag-text-color: var(--text-primary);
    border-radius: 8px;
    padding: 0;
}
.tagify__input {
    color: var(--text-primary);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.querySelector('#id_keyword');
    new Tagify(input, {
        delimiters: ",", 
        originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
    });

    const container = document.getElementById('fields-container');
    const addBtn = document.getElementById('add-field-btn');

    addBtn.addEventListener('click', function() {
        const row = document.createElement('div');
        row.className = 'field-row';
        row.style.display = 'flex';
        row.style.gap = '0.75rem';
        row.style.marginBottom = '0.75rem';
        row.style.alignItems = 'center';

        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'fields';
        input.className = 'form-input';
        input.style.flex = '1';
        input.style.borderRadius = '0';
        input.required = true;
        input.placeholder = 'e.g. Next Field Name';

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'btn btn-secondary remove-field-btn';
        removeBtn.style.padding = '0.75rem';
        removeBtn.style.color = 'var(--danger)';
        removeBtn.style.borderColor = 'rgba(239, 68, 68, 0.2)';
        removeBtn.style.borderRadius = '0';
        removeBtn.innerHTML = '&times;';

        row.appendChild(input);
        row.appendChild(removeBtn);
        container.appendChild(row);
    });

    container.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-field-btn') || e.target.parentElement.classList.contains('remove-field-btn')) {
            const row = e.target.closest('.field-row');
            if (row) {
                row.remove();
            }
        }
    });
});
</script>
{% endblock %}