{% extends "base.html" %}
{% block title %}Create Form - Admin Dashboard{% endblock %}
{% block extra_css %}
<style>
    /* Styling for the visual form builder */
    .field-card { border-left: 4px solid #0d6efd; transition: all 0.2s; }
    .field-card:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); }
    .drag-handle { cursor: grab; color: #adb5bd; }
</style>
<!-- Include SortableJS for drag-and-drop support -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
{% endblock %}
{% block content %}
<div class="mb-4">
    <a href="{{ url_for('admin.list_forms') }}" class="btn btn-outline-secondary btn-sm mb-3">
        <i class="bi bi-arrow-left"></i> Back to Forms
    </a>
    <h2><i class="bi bi-plus-circle me-2"></i> Create New Form</h2>
</div>

<div class="row">
    <div class="col-12">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <form action="{{ url_for('admin.create_form') }}" method="POST" id="create-form-form">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() if csrf_token else '' }}">
                    <!-- Hidden input to store the JSON payload we build via JS -->
                    <input type="hidden" name="form_structure" id="hidden_form_structure">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">Form Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required placeholder="e.g. Contact Us">
                        </div>
                        <div class="col-md-6 mb-3 d-flex align-items-end">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="true" checked>
                                <label class="form-check-label" for="is_active">Active (accepting submissions)</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="2" placeholder="Brief description of the form's purpose"></textarea>
                    </div>

                    <hr class="my-4">
                    
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">Form Builder</h5>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary me-2" id="toggle-json-view">
                                <i class="bi bi-code-slash"></i> Toggle JSON View
                            </button>
                            <button type="button" class="btn btn-sm btn-success" id="add-field-btn">
                                <i class="bi bi-plus"></i> Add Field
                            </button>
                        </div>
                    </div>

                    <!-- Visual Builder Area -->
                    <div id="visual-builder" class="mb-4 bg-light p-3 rounded border">
                        <div id="fields-container">
                            <!-- Fields will be dynamically injected here by JS -->
                        </div>
                        
                        <!-- Submit Button Config -->
                        <div class="card mt-4 border-success">
                            <div class="card-header bg-success text-white py-2">
                                <i class="bi bi-hand-index-thumb me-1"></i> Submit Button Configuration
                            </div>
                            <div class="card-body row">
                                <div class="col-md-6 mb-2">
                                    <label class="form-label small">Button Text</label>
                                    <input type="text" class="form-control form-control-sm" id="submit-btn-text" value="Submit">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="form-label small">Custom CSS Classes</label>
                                    <input type="text" class="form-control form-control-sm" id="submit-btn-css" placeholder="e.g. btn btn-primary">
                                </div>
                            </div>
                        </div>
                        
                        <!-- Notifications & Email Settings -->
                        <div class="card mt-4 border-info">
                            <div class="card-header bg-info text-dark py-2">
                                <i class="bi bi-envelope-paper me-1"></i> Notifications & Autoresponder
                            </div>
                            <div class="card-body">
                                <input type="hidden" name="settings" id="hidden_settings">
                                
                                <div class="row mb-4">
                                    <div class="col-12 border-bottom pb-3">
                                        <h6><i class="bi bi-bell text-primary me-2"></i>Admin Notification</h6>
                                        <p class="small text-muted mb-2">Send an email alert to specific addresses when a new submission arrives.</p>
                                        
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" id="notify_enabled">
                                            <label class="form-check-label small fw-bold" for="notify_enabled">Enable Admin Notification</label>
                                        </div>
                                        
                                        <div id="notify_options" style="display:none;" class="ps-4 mt-2 border-start border-2 border-primary">
                                            <label class="form-label small">Recipient Email(s)</label>
                                            <input type="text" class="form-control form-control-sm mb-1" id="notify_emails" placeholder="admin@domain.com, sales@domain.com">
                                            <small class="text-muted d-block" style="font-size: 0.75rem;">Comma separated list of email addresses.</small>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <h6><i class="bi bi-reply-all text-success me-2"></i>Submitter Autoresponder</h6>
                                        <p class="small text-muted mb-2">Send an automated "Thank You" email to the person who submitted the form.</p>
                                        
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" id="autorespond_enabled">
                                            <label class="form-check-label small fw-bold" for="autorespond_enabled">Enable Autoresponder</label>
                                        </div>
                                        
                                        <div id="autorespond_options" style="display:none;" class="ps-4 mt-2 border-start border-2 border-success">
                                            <div class="mb-2">
                                                <label class="form-label small">Target Email Field</label>
                                                <select class="form-select form-select-sm" id="autorespond_target_field">
                                                    <option value="">-- Select an email field from your form --</option>
                                                </select>
                                                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Select which form field contains the submitter's email address.</small>
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label small">Email Subject</label>
                                                <input type="text" class="form-control form-control-sm" id="autorespond_subject" value="Thank you for your submission!">
                                            </div>
                                            <div class="mb-2">
                                                <label class="form-label small">Email Body Template</label>
                                                <textarea class="form-control form-control-sm" id="autorespond_body" rows="4">Hello,

Thank you for contacting us. We have received your submission and will get back to you shortly.

Best regards,
The Team</textarea>
                                                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">You can use field variables like <code>{{'{{'}} field_name {{'}}'}}</code> in the body.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- JSON Editor Area (Hidden by default) -->
                    <div id="json-editor-container" class="mb-4" style="display:none;">
                        <div class="alert alert-warning py-2 small">
                            <i class="bi bi-exclamation-triangle"></i> Editing JSON directly will override the visual builder.
                        </div>
                        <textarea class="form-control font-monospace" id="json_textarea" rows="15">{{ default_form_structure | tojson(indent=4) }}</textarea>
                        <div class="form-text text-danger" id="json-error" style="display:none;">Invalid JSON format.</div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('admin.list_forms') }}" class="btn btn-light me-md-2">Cancel</a>
                        <button type="submit" class="btn btn-primary" id="save-btn"><i class="bi bi-save"></i> Save Form</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Template for a new field -->
<template id="field-template">
    <div class="card field-card mb-3 shadow-sm">
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0 text-primary"><i class="bi bi-grip-vertical drag-handle me-2"></i> Form Field</h6>
                <button type="button" class="btn btn-sm btn-outline-danger remove-field-btn"><i class="bi bi-trash"></i></button>
            </div>
            <div class="row g-2">
                <div class="col-md-4">
                    <label class="form-label small mb-1">Field Type</label>
                    <select class="form-select form-select-sm field-type">
                        <option value="text">Text Input</option>
                        <option value="email">Email</option>
                        <option value="textarea">Textarea (Multiline)</option>
                        <option value="select">Dropdown (Select)</option>
                        <option value="checkbox">Checkbox</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">Field Name (ID) *</label>
                    <input type="text" class="form-control form-control-sm field-name" required placeholder="e.g. first_name">
                </div>
                <div class="col-md-4">
                    <label class="form-label small mb-1">Display Label</label>
                    <input type="text" class="form-control form-control-sm field-label" placeholder="e.g. First Name">
                </div>
                
                <div class="col-md-4 mt-2">
                    <label class="form-label small mb-1">Placeholder</label>
                    <input type="text" class="form-control form-control-sm field-placeholder" placeholder="Optional text inside field">
                </div>
                <div class="col-md-4 mt-2">
                    <label class="form-label small mb-1">Custom CSS Classes</label>
                    <input type="text" class="form-control form-control-sm field-css" placeholder="e.g. form-control my-custom-input">
                </div>
                <div class="col-md-4 mt-2 d-flex align-items-end">
                    <div class="form-check form-switch mb-1">
                        <input class="form-check-input field-required" type="checkbox">
                        <label class="form-check-label small">Required Field</label>
                    </div>
                </div>

                <!-- Options container (only visible for select/radio/checkbox) -->
                <div class="col-12 mt-2 options-container" style="display:none;">
                    <label class="form-label small mb-1">Options (Comma separated)</label>
                    <input type="text" class="form-control form-control-sm field-options" placeholder="Option 1, Option 2, Option 3">
                </div>
            </div>
        </div>
    </div>
</template>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Core Elements
    const fieldsContainer = document.getElementById('fields-container');
    const addFieldBtn = document.getElementById('add-field-btn');
    const toggleJsonBtn = document.getElementById('toggle-json-view');
    const visualBuilder = document.getElementById('visual-builder');
    const jsonEditor = document.getElementById('json-editor-container');
    const jsonTextarea = document.getElementById('json_textarea');
    const hiddenFormStructure = document.getElementById('hidden_form_structure');
    const formEl = document.getElementById('create-form-form');
    
    // Initialize Drag & Drop Sortable
    if (typeof Sortable !== 'undefined') {
        new Sortable(fieldsContainer, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'bg-light',
            dragClass: 'shadow-lg',
            onEnd: function (evt) {
                // Fired when dragging ends
            }
        });
    }

    let isJsonView = false;
    let fieldCounter = 0;

    // Initialize with one default field
    addField('text', 'name', 'Name', 'Enter your name');
    addField('email', 'email', 'Email Address', 'Enter your email');

    // Add Field Button
    addFieldBtn.addEventListener('click', () => {
        addField();
    });

    // Toggle JSON / Visual View
    toggleJsonBtn.addEventListener('click', () => {
        isJsonView = !isJsonView;
        if (isJsonView) {
            // Switching to JSON: Generate JSON from visual builder
            jsonTextarea.value = JSON.stringify(buildJsonFromVisual(), null, 4);
            visualBuilder.style.display = 'none';
            jsonEditor.style.display = 'block';
            toggleJsonBtn.innerHTML = '<i class="bi bi-palette"></i> Back to Builder';
            addFieldBtn.style.display = 'none';
        } else {
            // Switching to Visual: We don't auto-parse complex JSON back to visual (too error prone for edge cases)
            // But we hide JSON and show visual again.
            visualBuilder.style.display = 'block';
            jsonEditor.style.display = 'none';
            toggleJsonBtn.innerHTML = '<i class="bi bi-code-slash"></i> Toggle JSON View';
            addFieldBtn.style.display = 'inline-block';
        }
    });

    // Toggle Settings UI
    const notifyEnabled = document.getElementById('notify_enabled');
    const notifyOptions = document.getElementById('notify_options');
    notifyEnabled.addEventListener('change', (e) => { notifyOptions.style.display = e.target.checked ? 'block' : 'none'; });

    const autorespondEnabled = document.getElementById('autorespond_enabled');
    const autorespondOptions = document.getElementById('autorespond_options');
    autorespondEnabled.addEventListener('change', (e) => { 
        autorespondOptions.style.display = e.target.checked ? 'block' : 'none'; 
        if(e.target.checked) updateEmailFieldDropdown();
    });

    // Helper to extract email fields for the dropdown
    function updateEmailFieldDropdown() {
        const select = document.getElementById('autorespond_target_field');
        const currentVal = select.value;
        select.innerHTML = '<option value="">-- Select an email field from your form --</option>';
        
        const cards = fieldsContainer.querySelectorAll('.field-card');
        cards.forEach(card => {
            const type = card.querySelector('.field-type').value;
            if(type === 'email' || type === 'text') {
                const name = card.querySelector('.field-name').value;
                const label = card.querySelector('.field-label').value || name;
                if(name) {
                    const opt = document.createElement('option');
                    opt.value = name;
                    opt.text = `${label} (${name})`;
                    select.appendChild(opt);
                }
            }
        });
        if(currentVal) select.value = currentVal;
    }

    // Handle Form Submit
    formEl.addEventListener('submit', function(e) {
        
        // Build settings JSON
        const settingsJson = {
            notifications: {
                enabled: notifyEnabled.checked,
                send_to: document.getElementById('notify_emails').value.split(',').map(s => s.trim()).filter(s => s)
            },
            autoresponder: {
                enabled: autorespondEnabled.checked,
                email_field_name: document.getElementById('autorespond_target_field').value,
                subject: document.getElementById('autorespond_subject').value,
                body_template: document.getElementById('autorespond_body').value
            }
        };
        document.getElementById('hidden_settings').value = JSON.stringify(settingsJson);

        if (!isJsonView) {
            // If in visual mode, build the JSON right before submit
            hiddenFormStructure.value = JSON.stringify(buildJsonFromVisual());
        } else {
            // If in JSON mode, take text area value directly
            try {
                JSON.parse(jsonTextarea.value); // Validate
                hiddenFormStructure.value = jsonTextarea.value;
            } catch (err) {
                e.preventDefault();
                alert("Invalid JSON configuration. Please fix errors before saving.");
                return false;
            }
        }
    });

    // Function to add a new visual field
    function addField(type = 'text', name = '', label = '', placeholder = '') {
        fieldCounter++;
        const template = document.getElementById('field-template');
        const clone = template.content.cloneNode(true);
        const card = clone.querySelector('.field-card');
        
        // Populate default values if provided
        card.querySelector('.field-type').value = type;
        card.querySelector('.field-name').value = name || `field_${fieldCounter}`;
        card.querySelector('.field-label').value = label;
        card.querySelector('.field-placeholder').value = placeholder;

        // Setup event listeners for this specific card
        setupCardEvents(card);
        
        fieldsContainer.appendChild(clone);
    }

    function setupCardEvents(card) {
        // Remove button
        card.querySelector('.remove-field-btn').addEventListener('click', function() {
            card.remove();
            updateEmailFieldDropdown(); // Refresh dropdown
        });

        // Type change (show/hide options)
        const typeSelect = card.querySelector('.field-type');
        const optionsContainer = card.querySelector('.options-container');
        
        typeSelect.addEventListener('change', function() {
            const val = this.value;
            if (val === 'select' || val === 'radio') {
                optionsContainer.style.display = 'block';
            } else {
                optionsContainer.style.display = 'none';
            }
            updateEmailFieldDropdown(); // Refresh dropdown
        });
        
        // Name change (refresh dropdown)
        card.querySelector('.field-name').addEventListener('change', updateEmailFieldDropdown);
        
        // Trigger change initially to set correct state
        typeSelect.dispatchEvent(new Event('change'));
    }

    // Builder Logic: Read visual fields and construct JSON
    function buildJsonFromVisual() {
        const json = {
            version: "1.0",
            fields: [],
            submit_button: {
                text: document.getElementById('submit-btn-text').value || "Submit",
                css_classes: document.getElementById('submit-btn-css').value || ""
            }
        };

        const cards = fieldsContainer.querySelectorAll('.field-card');
        cards.forEach(card => {
            const type = card.querySelector('.field-type').value;
            const fieldDef = {
                name: card.querySelector('.field-name').value,
                type: type,
                label: card.querySelector('.field-label').value,
                placeholder: card.querySelector('.field-placeholder').value,
                required: card.querySelector('.field-required').checked,
                css_classes: card.querySelector('.field-css').value
            };

            if (type === 'select' || type === 'radio') {
                const optsString = card.querySelector('.field-options').value;
                if (optsString) {
                    fieldDef.options = optsString.split(',').map(s => s.trim()).filter(s => s);
                }
            }

            json.fields.push(fieldDef);
        });

        return json;
    }
});
</script>
{% endblock %}