<!-- templates/core/field_builder.html -->
{% extends 'core/base.html' %}
{% load static %}

{% block title %}Field Builder - Modern POS{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
   
        <div class="col-md-9">
            <div class="p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h1 class="gradient-text">Field Builder</h1>
                    <button type="button" class="btn gradient-button" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
                        <i class="fas fa-plus me-2"></i>Create Category
                    </button>
                </div>
                
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endif %}
                
                <!-- Category Cards -->
                {% for category in categories %}
                <div class="card shadow-card rounded-card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">
                                {% if category.icon %}<i class="{{ category.icon }} me-2"></i>{% endif %}
                                {{ category.name }}
                            </h5>
                            <small class="text-muted">{{ category.description }}</small>
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addFieldModal" data-category="{{ category.id }}">
                                <i class="fas fa-plus"></i> Add Field
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="editCategory({{ category.id }})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteCategory({{ category.id }})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        {% if category.fields.all %}
                            <div class="row">
                                {% for field in category.fields.all %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="field-card p-3 rounded shadow-sm" style="background: rgba(255,255,255,0.1);">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <h6 class="mb-1">{{ field.label }}</h6>
                                                <small class="text-muted">{{ field.get_field_type_display }}</small>
                                                {% if field.required %}<span class="badge bg-danger ms-1">Required</span>{% endif %}
                                            </div>
                                            <div class="btn-group btn-group-sm">
                                                <button class="btn btn-outline-primary btn-sm" onclick="editField({{ field.id }})">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-outline-danger btn-sm" onclick="deleteField({{ field.id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="mt-2">
                                            {% if field.show_on_receipt %}<span class="badge bg-success">Receipt</span>{% endif %}
                                            {% if field.show_on_reports %}<span class="badge bg-info">Report</span>{% endif %}
                                            {% if field.show_on_pos %}<span class="badge bg-warning">POS</span>{% endif %}
                                        </div>
                                        {% if field.placeholder %}<small class="text-muted d-block mt-1">Placeholder: {{ field.placeholder }}</small>{% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4 text-muted">
                                <i class="fas fa-inbox fa-3x mb-2"></i>
                                <p>No fields created yet. Add your first field!</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
                
                {% if not categories %}
                <div class="text-center py-5">
                    <i class="fas fa-cogs fa-5x text-muted mb-3"></i>
                    <h4 class="text-muted">No Categories Created Yet</h4>
                    <p class="text-muted">Start by creating your first category to organize custom fields</p>
                    <button type="button" class="btn gradient-button" data-bs-toggle="modal" data-bs-target="#createCategoryModal">
                        <i class="fas fa-plus me-2"></i>Create Your First Category
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Create Category Modal -->
<div class="modal fade" id="createCategoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="{{ category_form.name.id_for_label }}" class="form-label">Category Name</label>
                        {{ category_form.name }}
                    </div>
                    <div class="mb-3">
                        <label for="{{ category_form.description.id_for_label }}" class="form-label">Description</label>
                        {{ category_form.description }}
                    </div>
                    <div class="mb-3">
                        <label for="{{ category_form.icon.id_for_label }}" class="form-label">Icon (Font Awesome)</label>
                        {{ category_form.icon }}
                        <small class="text-muted">e.g., fa-box, fa-user, fa-cash-register</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" name="create_category" class="btn gradient-button">Create Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Field Modal -->
<div class="modal fade" id="addFieldModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Field</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ field_form.category.id_for_label }}" class="form-label">Category</label>
                                {{ field_form.category }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ field_form.field_type.id_for_label }}" class="form-label">Field Type</label>
                                {{ field_form.field_type }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ field_form.name.id_for_label }}" class="form-label">Internal Name</label>
                                {{ field_form.name }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="{{ field_form.label.id_for_label }}" class="form-label">Display Label</label>
                                {{ field_form.label }}
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="{{ field_form.placeholder.id_for_label }}" class="form-label">Placeholder</label>
                        {{ field_form.placeholder }}
                    </div>
                    <div class="mb-3">
                        <label for="{{ field_form.help_text.id_for_label }}" class="form-label">Help Text</label>
                        {{ field_form.help_text }}
                    </div>
                    <div class="mb-3">
                        <label for="{{ field_form.default_value.id_for_label }}" class="form-label">Default Value</label>
                        {{ field_form.default_value }}
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-check form-switch mb-3">
                                {{ field_form.required }}
                                <label class="form-check-label" for="{{ field_form.required.id_for_label }}">Required Field</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch mb-3">
                                {{ field_form.show_on_receipt }}
                                <label class="form-check-label" for="{{ field_form.show_on_receipt.id_for_label }}">Show on Receipt</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch mb-3">
                                {{ field_form.show_on_reports }}
                                <label class="form-check-label" for="{{ field_form.show_on_reports.id_for_label }}">Show on Reports</label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="{{ field_form.order.id_for_label }}" class="form-label">Display Order</label>
                        {{ field_form.order }}
                    </div>
                    <div class="mb-3" id="dropdownOptionsField" style="display: none;">
                        <label for="{{ field_form.dropdown_options.id_for_label }}" class="form-label">Dropdown Options (JSON Array)</label>
                        {{ field_form.dropdown_options }}
                        <small class="text-muted">e.g., ["Option 1", "Option 2", "Option 3"]</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" name="create_field" class="btn gradient-button">Add Field</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Show/hide dropdown options field based on field type
document.addEventListener('DOMContentLoaded', function() {
    const fieldTypeSelect = document.getElementById('{{ field_form.field_type.id_for_label }}');
    const dropdownField = document.getElementById('dropdownOptionsField');
    
    function toggleDropdownField() {
        if (fieldTypeSelect && dropdownField) {
            if (fieldTypeSelect.value === 'dropdown') {
                dropdownField.style.display = 'block';
            } else {
                dropdownField.style.display = 'none';
            }
        }
    }
    
    if (fieldTypeSelect) {
        fieldTypeSelect.addEventListener('change', toggleDropdownField);
        toggleDropdownField(); // Initialize
    }
    
    // Set category in add field modal
    const addFieldModal = document.getElementById('addFieldModal');
    addFieldModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const categoryId = button.getAttribute('data-category');
        const categorySelect = document.getElementById('{{ field_form.category.id_for_label }}');
        if (categorySelect && categoryId) {
            categorySelect.value = categoryId;
        }
    });
});

function editField(fieldId) {
    window.location.href = `/field-builder/field/${fieldId}/edit/`;
}

function deleteField(fieldId) {
    if (confirm('Are you sure you want to delete this field?')) {
        window.location.href = `/field-builder/field/${fieldId}/delete/`;
    }
}

function editCategory(categoryId) {
    alert('Edit category functionality would be implemented here');
}

function deleteCategory(categoryId) {
    if (confirm('Are you sure you want to delete this category and all its fields?')) {
        alert('Delete category functionality would be implemented here');
    }
}
</script>
{% endblock %}