@extends('layouts.admin')

@section('title', 'Form Builder')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Form Builder</h1>
        <div class="d-flex gap-2">
            <button id="save-form" class="btn btn-primary"><i class="fas fa-save me-1"></i> Save Form</button>
            <button id="preview-form" class="btn btn-success"><i class="fas fa-eye me-1"></i> Preview</button>
        </div>
         
    </div>

    <div class="row g-4">
        <!-- Form Elements -->
        <div class="col-lg-3">
            <div class="card shadow-sm p-3">
                <h5>Form Elements</h5>
                <div id="form-elements">
                    <div class="drag-item border p-2 mb-2" data-type="text">Text Input</div>
                    <div class="drag-item border p-2 mb-2" data-type="textarea">Textarea</div>
                    <div class="drag-item border p-2 mb-2" data-type="select">Select</div>
                    <div class="drag-item border p-2 mb-2" data-type="radio">Radio</div>
                    <div class="drag-item border p-2 mb-2" data-type="checkbox">Checkbox</div>
                    <div class="drag-item border p-2 mb-2" data-type="email">Email</div>
                    <div class="drag-item border p-2 mb-2" data-type="number">Number</div>
                    <div class="drag-item border p-2 mb-2" data-type="date">Date</div>
                </div>
            </div>
        </div>

        <!-- Form Canvas -->
        <div class="col-lg-6">
            <div class="card shadow-sm p-3">
                <h5>Form Builder</h5>
                <input type="text" id="form-title" class="form-control mb-2" placeholder="Form Title">
                <textarea id="form-description" class="form-control mb-3" placeholder="Form Description"></textarea>
                <div id="form-canvas" class="drop-zone p-3" style="min-height:300px; border:2px dashed #ccc;">
                    <div id="empty-state" class="text-center text-muted py-5">Drag fields here</div>
                </div>
            </div>
        </div>

        <!-- Properties Panel -->
        <div class="col-lg-3">
            <div class="card shadow-sm p-3" id="properties-panel">
                <h5>Field Properties</h5>
                <div id="properties-content">
                    <p class="text-muted">Select a field to edit</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="preview-modal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="previewModalLabel">Form Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" id="preview-content"></div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('form-canvas');
    const emptyState = document.getElementById('empty-state');
    const previewBtn = document.getElementById('preview-form');
    const saveBtn = document.getElementById('save-form');
    const previewModal = new bootstrap.Modal(document.getElementById('preview-modal'));
    const previewContent = document.getElementById('preview-content');
    let selectedField = null;

    // Make canvas sortable
    new Sortable(canvas, {
        group: 'fields',
        animation: 150,
        onAdd: () => { emptyState.style.display = 'none'; }
    });

    // Make form elements draggable
    document.querySelectorAll('#form-elements .drag-item').forEach(item => {
        item.setAttribute('draggable', true);
        item.addEventListener('dragstart', e => e.dataTransfer.setData('type', item.dataset.type));
    });

    canvas.addEventListener('dragover', e => e.preventDefault());
    canvas.addEventListener('drop', e => {
        e.preventDefault();
        const type = e.dataTransfer.getData('type');
        if(!type) return;
        emptyState.style.display = 'none';
        const field = createField(type);
        canvas.appendChild(field);
        selectField(field);
    });

    function createField(type){
        const wrapper = document.createElement('div');
        wrapper.className = 'form-field border p-2 mb-2';
        wrapper.dataset.type = type;

        // Label input
        const label = document.createElement('input');
        label.type = 'text';
        label.value = type.charAt(0).toUpperCase()+type.slice(1);
        label.className = 'form-control mb-2';
        label.placeholder = 'Field Label';

        // Input field
        let input;
        switch(type){
            case 'text': input = document.createElement('input'); input.type='text'; input.className='form-control'; break;
            case 'textarea': input = document.createElement('textarea'); input.className='form-control'; break;
            case 'email': input = document.createElement('input'); input.type='email'; input.className='form-control'; break;
            case 'number': input = document.createElement('input'); input.type='number'; input.className='form-control'; break;
            case 'date': input = document.createElement('input'); input.type='date'; input.className='form-control'; break;
            case 'select': 
                input = document.createElement('select'); input.className='form-select';
                input.innerHTML = '<option>Option 1</option><option>Option 2</option>'; break;
            case 'radio': 
                input = document.createElement('div');
                input.innerHTML = '<div class="form-check"><input class="form-check-input" type="radio"><label class="form-check-label">Option 1</label></div>'; break;
            case 'checkbox':
                input = document.createElement('div');
                input.innerHTML = '<div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">Option 1</label></div>'; break;
        }

        // Actions
        const actions = document.createElement('div');
        actions.className = 'field-actions mt-1';
        const delBtn = document.createElement('button');
        delBtn.className = 'btn btn-sm btn-danger';
        delBtn.textContent = 'Delete';
        delBtn.addEventListener('click', e => {
            e.stopPropagation();
            wrapper.remove();
            selectedField = null;
            document.getElementById('properties-content').innerHTML = '<p class="text-muted">Select a field to edit</p>';
        });
        actions.appendChild(delBtn);

        wrapper.appendChild(label);
        wrapper.appendChild(input);
        wrapper.appendChild(actions);

        wrapper.addEventListener('click', e => {
            if(e.target.closest('.field-actions')) return;
            selectField(wrapper);
        });

        return wrapper;
    }

    function selectField(field){
        if(selectedField) selectedField.style.borderColor = '#dee2e6';
        selectedField = field;
        field.style.borderColor = '#0d6efd';
        showProperties(field);
    }

    
    function showProperties(field) {
    const panel = document.getElementById('properties-panel');
    panel.innerHTML = '';

    // Field type info
    const typeInfo = document.createElement('p');
    typeInfo.textContent = 'Field Type: ' + field.dataset.type;
    panel.appendChild(typeInfo);

    // Field label
    panel.appendChild(document.createTextNode('Field Label:'));
    const labelInput = document.createElement('input');
    labelInput.type = 'text';
    labelInput.className = 'form-control mb-2';
    labelInput.value = field.querySelector('input[type=text]')?.value || '';
    labelInput.addEventListener('input', e => {
        field.querySelector('input[type=text]').value = e.target.value;
        // Update target_field in conditional logic if exists
        if(field.dataset.conditionalLogic){
            const logic = JSON.parse(field.dataset.conditionalLogic);
            logic.target_field = e.target.value;
            field.dataset.conditionalLogic = JSON.stringify(logic);
        }
    });
    panel.appendChild(labelInput);

    // If select, show options editor
    if(field.dataset.type === 'select'){
        const optionsLabel = document.createElement('label');
        optionsLabel.textContent = 'Options (comma separated):';
        const optionsInput = document.createElement('input');
        optionsInput.type = 'text';
        optionsInput.className = 'form-control mb-2';
        const selectEl = field.querySelector('select');
        if(selectEl){
            optionsInput.value = Array.from(selectEl.options).map(o => o.text).join(',');
        }
        optionsInput.addEventListener('input', e => {
            const values = e.target.value.split(',').map(v => v.trim());
            selectEl.innerHTML = '';
            values.forEach(v => {
                const opt = document.createElement('option');
                opt.textContent = v;
                selectEl.appendChild(opt);
            });
        });
        panel.appendChild(optionsLabel);
        panel.appendChild(optionsInput);
    }

    // Validation
    panel.appendChild(document.createTextNode('Validation Rules:'));
    const validationDiv = document.createElement('div');

    // Required
    const requiredDiv = document.createElement('div');
    requiredDiv.className = 'form-check mb-2';
    const requiredInput = document.createElement('input');
    requiredInput.type = 'checkbox';
    requiredInput.className = 'form-check-input';
    requiredInput.checked = field.dataset.validation?.includes('required');
    const requiredLabel = document.createElement('label');
    requiredLabel.textContent = 'Required';
    requiredLabel.className = 'form-check-label';
    requiredDiv.appendChild(requiredInput);
    requiredDiv.appendChild(requiredLabel);
    validationDiv.appendChild(requiredDiv);

    // Min length
    const minInput = document.createElement('input');
    minInput.type = 'number';
    minInput.className = 'form-control mb-2';
    minInput.placeholder = 'Min length';
    minInput.value = field.dataset.min || '';
    validationDiv.appendChild(minInput);

    // Max length
    const maxInput = document.createElement('input');
    maxInput.type = 'number';
    maxInput.className = 'form-control mb-2';
    maxInput.placeholder = 'Max length';
    maxInput.value = field.dataset.max || '';
    validationDiv.appendChild(maxInput);

    panel.appendChild(validationDiv);

    // Conditional Logic
    panel.appendChild(document.createTextNode('Conditional Logic:'));
    const condDiv = document.createElement('div');
    condDiv.className = 'mb-2';

    const conditionSelect = document.createElement('select');
    conditionSelect.className = 'form-select mb-2';
    ['none','show','hide'].forEach(opt => {
        const option = document.createElement('option');
        option.value = opt;
        option.textContent = opt.charAt(0).toUpperCase() + opt.slice(1);
        conditionSelect.appendChild(option);
    });
    condDiv.appendChild(conditionSelect);

    const sourceSelect = document.createElement('select');
    sourceSelect.className = 'form-select mb-2';
    sourceSelect.innerHTML = '<option value="">Select field</option>';
    document.querySelectorAll('#form-canvas .form-field').forEach(f => {
        if(f !== field){
            const text = f.querySelector('input[type=text]')?.value || f.dataset.type;
            const opt = document.createElement('option');
            opt.value = f.dataset.type + '-' + text;
            opt.textContent = text;
            sourceSelect.appendChild(opt);
        }
    });
    condDiv.appendChild(sourceSelect);

    const operatorSelect = document.createElement('select');
    operatorSelect.className = 'form-select mb-2';
    ['==','!=','>','<','>=','<=','contains','not_contains'].forEach(op => {
        const option = document.createElement('option');
        option.value = op;
        option.textContent = op;
        operatorSelect.appendChild(option);
    });
    condDiv.appendChild(operatorSelect);

    const valueInput = document.createElement('input');
    valueInput.type = 'text';
    valueInput.className = 'form-control mb-2';
    valueInput.placeholder = 'Value';
    condDiv.appendChild(valueInput);

    panel.appendChild(condDiv);

    // Load existing conditional logic
    if(field.dataset.conditionalLogic){
        const logic = JSON.parse(field.dataset.conditionalLogic);
        conditionSelect.value = logic.condition;
        sourceSelect.value = logic.source_field;
        operatorSelect.value = logic.operator;
        valueInput.value = logic.value;
    }

    // Save changes to dataset
    [requiredInput, minInput, maxInput, conditionSelect, sourceSelect, operatorSelect, valueInput].forEach(el => {
        el.addEventListener('change', () => {
            const rules = [];
            if(requiredInput.checked) rules.push('required');
            field.dataset.validation = rules.join(',');
            field.dataset.min = minInput.value;
            field.dataset.max = maxInput.value;

            field.dataset.conditionalLogic = JSON.stringify({
                condition: conditionSelect.value,
                source_field: sourceSelect.value,
                operator: operatorSelect.value,
                value: valueInput.value,
                target_field: field.querySelector('input[type=text]').value
            });
        });
    });
}


    // Preview
    previewBtn.addEventListener('click', () => {
        let html = '';
        canvas.querySelectorAll('.form-field').forEach(f => {
            const label = f.querySelector('input[type=text]')?.value || '';
            const type = f.dataset.type;
            html += `<div class="mb-3"><label>${label}</label>`;
            switch(type){
                case 'text':
                case 'email':
                case 'number':
                case 'date':
                    html += `<input class="form-control" type="${type}">`; break;
                case 'textarea': html += '<textarea class="form-control"></textarea>'; break;
                case 'select':
                    html += '<select class="form-select">';
                    Array.from(f.querySelector('select').options).forEach(opt => html += `<option>${opt.text}</option>`);
                    html += '</select>'; break;
                case 'radio':
                    f.querySelectorAll('.form-check').forEach(opt => {
                        const optLabel = opt.querySelector('label')?.textContent || '';
                        html += `<div class="form-check">
                                    <input type="radio" class="form-check-input" name="${f.dataset.type}">
                                    <label class="form-check-label">${optLabel}</label>
                                 </div>`;
                    }); break;
                case 'checkbox':
                    f.querySelectorAll('.form-check').forEach(opt => {
                        const optLabel = opt.querySelector('label')?.textContent || '';
                        html += `<div class="form-check">
                                    <input type="checkbox" class="form-check-input">
                                    <label class="form-check-label">${optLabel}</label>
                                 </div>`;
                    }); break;
            }
            html += '</div>';
        });
        previewContent.innerHTML = html || '<p class="text-muted">No fields added yet.</p>';
        previewModal.show();
    });

  
    saveBtn.addEventListener('click', () => {
    const formData = [];

    canvas.querySelectorAll('.form-field').forEach(f => {
        const type = f.dataset.type;
        const label = f.querySelector('input[type=text]')?.value || '';

        // Validation
        const validation = f.dataset.validation?.split(',') || [];
        const min = f.dataset.min || null;
        const max = f.dataset.max || null;

        // Conditional logic
        const conditional_logic = f.dataset.conditionalLogic ? JSON.parse(f.dataset.conditionalLogic) : null;

        // Options for select, radio, checkbox
        let options = [];
        if(type === 'select'){
            const selectEl = f.querySelector('select');
            options = Array.from(selectEl.options).map(opt => opt.text);
        } else if(type === 'radio' || type === 'checkbox'){
            options = Array.from(f.querySelectorAll('.form-check label')).map(l => l.textContent);
        }

        formData.push({ 
            type, 
            label, 
            validation, 
            min, 
            max, 
            conditional_logic,
            options
        });
    });

    const payload = {
        title: document.getElementById('form-title').value,
        description: document.getElementById('form-description').value,
        form_data: formData
    };

    fetch("{{ route('forms.store') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(data => {
        if(data.form){
            alert('Form saved successfully!');
        } else if(data.errors){
            alert('Validation failed. Check console.');
            console.log(data.errors);
        }
    })
    .catch(err => console.error(err));
});

});
</script>
@endsection