@extends('layouts.app')

@section('title', 'Edit Form — ' . ($form->name ?? ''))

@push('styles')
<style>
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }

    .breadcrumb a { color: var(--accent); }
    .breadcrumb a:hover { text-decoration: underline; }

    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .page-header h1 { font-size: 1.5rem; font-weight: 700; }

    .builder-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .card-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card-title i { color: var(--accent); }

    .form-group { margin-bottom: 1.25rem; }

    .form-group label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }

    .form-group label .required { color: var(--danger); }

    .form-control {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-primary);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.875rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .form-control:focus { border-color: var(--accent); }
    .form-control::placeholder { color: var(--text-muted); }

    textarea.form-control { min-height: 80px; resize: vertical; }

    .form-error { color: var(--danger); font-size: 0.75rem; margin-top: 0.375rem; }

    .fields-list { min-height: 100px; }

    .field-item {
        background: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: border-color var(--transition);
    }

    .field-item:hover { border-color: var(--accent); }

    .field-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .field-item-title {
        font-size: 0.85rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .field-type-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        background: var(--accent-light);
        color: var(--accent);
        font-weight: 500;
        text-transform: uppercase;
    }

    .field-item-actions { display: flex; gap: 0.25rem; }

    .field-action-btn {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        border: none;
        background: none;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        transition: all var(--transition);
    }

    .field-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
    .field-action-btn.delete:hover { background: var(--danger-light); color: var(--danger); }

    .field-config {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .field-config .full-width { grid-column: 1 / -1; }

    .field-config label {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 0.25rem;
        display: block;
    }

    .field-config input,
    .field-config select,
    .field-config textarea {
        width: 100%;
        padding: 0.5rem 0.625rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.8rem;
        outline: none;
    }

    .field-config input:focus,
    .field-config select:focus { border-color: var(--accent); }

    .field-config textarea { min-height: 50px; resize: vertical; }

    .required-toggle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .required-toggle input { width: auto !important; accent-color: var(--accent); }

    .add-field-section {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .field-type-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .field-type-btn {
        padding: 0.625rem;
        background: var(--bg-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all var(--transition);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
        font-family: inherit;
    }

    .field-type-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
    .field-type-btn i { font-size: 1rem; }

    .preview-form {
        background: var(--bg-primary);
        border-radius: var(--radius-md);
        padding: 1.5rem;
    }

    .preview-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
    .preview-description { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }

    .preview-field { margin-bottom: 1rem; }

    .preview-field label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 0.375rem;
        color: var(--text-secondary);
    }

    .preview-field input,
    .preview-field select,
    .preview-field textarea {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.85rem;
    }

    .preview-field textarea { min-height: 80px; resize: vertical; }

    .preview-field .checkbox-group,
    .preview-field .radio-group { display: flex; flex-direction: column; gap: 0.375rem; }

    .preview-field .checkbox-group label,
    .preview-field .radio-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; cursor: pointer; }

    .preview-field .checkbox-group input,
    .preview-field .radio-group input { width: auto; accent-color: var(--accent); }

    .preview-submit { margin-top: 1.5rem; }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    .form-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
        margin-top: 1.5rem;
    }

    .toggle-wrapper {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .toggle-switch { position: relative; width: 44px; height: 24px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--border);
        border-radius: 24px;
        transition: 0.3s;
    }

    .toggle-slider::before {
        content: '';
        position: absolute;
        height: 18px; width: 18px;
        left: 3px; bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

    .toggle-label { font-size: 0.875rem; color: var(--text-secondary); }

    @media (max-width: 768px) {
        .builder-grid { grid-template-columns: 1fr; }
        .field-type-grid { grid-template-columns: repeat(2, 1fr); }
        .field-config { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="breadcrumb">
        <a href="{{ route('inventory.forms.index') }}">Forms</a>
        <i class="fas fa-chevron-right" style="font-size:0.6rem;"></i>
        <a href="{{ route('inventory.forms.show', $form->id) }}">{{ $form->name ?? 'Form' }}</a>
        <i class="fas fa-chevron-right" style="font-size:0.6rem;"></i>
        <span>Edit</span>
    </div>

    <div class="page-header">
        <h1>Edit Form</h1>
    </div>

    @if($errors->any())
        <div style="background:rgba(255,71,87,0.08); border:1px solid rgba(255,71,87,0.35); color:#ff4757; padding:0.85rem 1.1rem; border-radius:var(--radius-md); margin-bottom:1rem;">
            <strong><i class="fas fa-triangle-exclamation"></i> Couldn't save your form:</strong>
            <ul style="margin:0.4rem 0 0 1.25rem; padding:0; font-size:0.88rem;">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('inventory.forms.update', $form->id) }}" method="POST" id="formBuilder">
        @csrf
        @method('PUT')

        <div class="card">
            <h3 class="card-title"><i class="fas fa-file-lines"></i> Form Details</h3>
            <div class="form-row">
                <div class="form-group">
                    <label>Form Name <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" id="formName" value="{{ old('name', $form->name) }}" required>
                    @error('name') <div class="form-error">{{ $message }}</div> @enderror
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <input type="text" name="description" class="form-control" id="formDescription" value="{{ old('description', $form->description) }}">
                </div>
            </div>
            <div class="toggle-wrapper">
                <label class="toggle-switch">
                    <input type="hidden" name="status" value="draft">
                    <input type="checkbox" name="status" value="active" {{ ($form->status ?? 'draft') === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
                <span class="toggle-label">Form is active</span>
            </div>
        </div>

        <div class="builder-grid">
            <div>
                <div class="card">
                    <h3 class="card-title"><i class="fas fa-list"></i> Form Fields</h3>

                    @php
                        $useDefaults = (bool) (($form->settings['use_default_customer_fields'] ?? true));
                    @endphp

                    {{-- Template bar — apply a curated template to this form --}}
                    <div style="background:rgba(16,191,255,0.06); border:1px solid rgba(16,191,255,0.25); border-radius:var(--radius-md); padding:0.85rem 1rem; margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;">
                        <i class="fas fa-wand-magic-sparkles" style="color:var(--accent); font-size:1rem;"></i>
                        <div style="flex:1; min-width:200px;">
                            <div style="font-weight:600; font-size:0.88rem;">Apply a template</div>
                            <div style="font-size:0.75rem; color:var(--text-muted); margin-top:0.15rem;">
                                Replace the current fields with a curated template.
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary" onclick="applyDefaultTemplate()">
                            <i class="fas fa-bolt"></i> Apply Default Template
                        </button>
                    </div>

                    {{-- LOCKED DEFAULT FIELDS notice --}}
                    <div id="lockedDefaultsBox" style="display:{{ $useDefaults ? 'block' : 'none' }}; background:rgba(0,212,170,0.06); border:1px solid rgba(0,212,170,0.25); border-radius:var(--radius-md); padding:0.85rem 1rem; margin-bottom:1rem;">
                        <div style="display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; font-weight:600; color:var(--accent); margin-bottom:0.5rem;">
                            <i class="fas fa-lock"></i> Default fields (automatic on every form)
                        </div>
                        <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:0.5rem; font-size:0.82rem;">
                            <div style="padding:0.4rem 0.6rem; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                                <i class="fas fa-user" style="color:var(--text-muted); margin-right:0.3rem;"></i>
                                Full Name <span style="color:var(--danger);">*</span>
                            </div>
                            <div style="padding:0.4rem 0.6rem; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                                <i class="fas fa-envelope" style="color:var(--text-muted); margin-right:0.3rem;"></i>
                                Email <span style="color:var(--danger);">*</span>
                            </div>
                            <div style="padding:0.4rem 0.6rem; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border);">
                                <i class="fas fa-phone" style="color:var(--text-muted); margin-right:0.3rem;"></i>
                                Phone
                            </div>
                        </div>
                        <div style="font-size:0.72rem; color:var(--text-muted); margin-top:0.5rem;">
                            These are always collected from the customer. Don't add them again below.
                        </div>
                    </div>

                    <div id="templateProvidesDefaultsBox" style="display:{{ $useDefaults ? 'none' : 'block' }}; background:rgba(255,159,67,0.06); border:1px solid rgba(255,159,67,0.3); border-radius:var(--radius-md); padding:0.85rem 1rem; margin-bottom:1rem;">
                        <div style="display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; font-weight:600; color:#cc7a00; margin-bottom:0.4rem;">
                            <i class="fas fa-info-circle"></i> Template manages customer info
                        </div>
                        <div style="font-size:0.78rem; color:var(--text-muted);">
                            This form's custom fields collect the customer's name, phone, email and address —
                            so the default Name/Email/Phone block is turned off on the embed to avoid duplicates.
                            <a href="#" onclick="restoreDefaultCustomerFields(); return false;" style="color:var(--accent); margin-left:0.4rem;">Restore defaults</a>
                        </div>
                    </div>

                    <input type="hidden" name="settings[use_default_customer_fields]" id="useDefaultCustomerFields" value="{{ $useDefaults ? '1' : '0' }}">

                    <div class="fields-list" id="fieldsList"></div>
                    <input type="hidden" name="fields" id="fieldsData">

                    <div class="add-field-section">
                        <label style="font-size:0.85rem; font-weight:500; color:var(--text-secondary);">Add a field</label>
                        <div class="field-type-grid">
                            <button type="button" class="field-type-btn" onclick="addField('text')"><i class="fas fa-font"></i> Text</button>
                            <button type="button" class="field-type-btn" onclick="addField('email')"><i class="fas fa-envelope"></i> Email</button>
                            <button type="button" class="field-type-btn" onclick="addField('phone')"><i class="fas fa-phone"></i> Phone</button>
                            <button type="button" class="field-type-btn" onclick="addField('number')"><i class="fas fa-hashtag"></i> Number</button>
                            <button type="button" class="field-type-btn" onclick="addField('textarea')"><i class="fas fa-align-left"></i> Textarea</button>
                            <button type="button" class="field-type-btn" onclick="addField('select')"><i class="fas fa-caret-down"></i> Select</button>
                            <button type="button" class="field-type-btn" onclick="addField('checkbox')"><i class="fas fa-check-square"></i> Checkbox</button>
                            <button type="button" class="field-type-btn" onclick="addField('radio')"><i class="fas fa-circle-dot"></i> Radio</button>
                            <button type="button" class="field-type-btn" onclick="addField('product')" style="border-color: var(--accent); background: var(--accent-light);"><i class="fas fa-shopping-cart"></i> Products</button>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <h3 class="card-title"><i class="fas fa-cog"></i> Settings</h3>
                    <div class="form-group">
                        <label>Thank You Message</label>
                        <textarea name="thank_you_message" class="form-control">{{ old('thank_you_message', $form->thank_you_message ?? 'Thank you for your order!') }}</textarea>
                    </div>
                    <div class="form-group">
                        <label>Redirect URL (optional)</label>
                        <input type="url" name="redirect_url" class="form-control" value="{{ old('redirect_url', $form->redirect_url) }}">
                    </div>

                    @php
                        $existingSettings = is_array($form->settings ?? null) ? $form->settings : [];
                        $existingColor    = old('settings.primary_color', $existingSettings['primary_color'] ?? '#00d4aa');
                        $existingConfirm  = (bool) old('settings.confirm_before_submit', $existingSettings['confirm_before_submit'] ?? false);
                    @endphp
                    <div class="form-row">
                        <div class="form-group">
                            <label>Primary Colour</label>
                            <div style="display:flex; align-items:center; gap:0.5rem;">
                                <input type="color" name="settings[primary_color]" id="primaryColorInput"
                                       value="{{ $existingColor }}"
                                       style="width:48px; height:38px; padding:0; border:1px solid var(--border); border-radius:6px; background:transparent; cursor:pointer;">
                                <input type="text" id="primaryColorText"
                                       value="{{ $existingColor }}"
                                       class="form-control" style="flex:1;"
                                       maxlength="7" pattern="^#[0-9A-Fa-f]{6}$">
                            </div>
                            <small style="font-size:0.72rem; color:var(--text-muted); margin-top:0.3rem; display:block;">
                                Used for the Submit button + product accents on the embedded form.
                            </small>
                        </div>
                    </div>

                    {{-- Submission behaviour toggles --}}
                    <div class="form-group">
                        <label style="display:block;">Submission behaviour</label>
                        <label style="display:flex; align-items:center; gap:0.5rem; padding:0.55rem 0; cursor:pointer;">
                            <input type="checkbox" name="settings[confirm_before_submit]" value="1"
                                   {{ $existingConfirm ? 'checked' : '' }}>
                            <span style="font-size:0.88rem;">Ask the buyer to confirm before placing the order</span>
                        </label>
                        <small style="font-size:0.72rem; color:var(--text-muted);">
                            Shows an "Are you sure you want to place this order?" prompt on the WordPress embed before submitting. Recommended for high-value orders to prevent accidental submissions.
                        </small>
                    </div>
                </div>

                <div class="form-actions">
                    <a href="{{ route('inventory.forms.show', $form->id) }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Changes</button>
                </div>
            </div>

            <div>
                <div class="card" style="position:sticky; top: calc(var(--topbar-height) + 2rem);">
                    <h3 class="card-title"><i class="fas fa-eye"></i> Preview</h3>
                    <div class="preview-form" id="formPreview">
                        <div class="preview-title" id="previewTitle">{{ $form->name ?? 'Your Form' }}</div>
                        <div class="preview-description" id="previewDescription">{{ $form->description ?? '' }}</div>

                        <div class="preview-field">
                            <label>Full Name *</label>
                            <input type="text" placeholder="Customer's full name" disabled>
                        </div>
                        <div class="preview-field">
                            <label>Email *</label>
                            <input type="email" placeholder="customer@example.com" disabled>
                        </div>
                        <div class="preview-field">
                            <label>Phone</label>
                            <input type="tel" placeholder="Customer phone" disabled>
                        </div>
                        <hr style="border:none; border-top:1px dashed var(--border); margin:1rem 0;">

                        <div id="previewFields">
                            <p style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:2rem 0;">Loading fields...</p>
                        </div>
                        <div class="preview-submit">
                            <button type="button" class="btn btn-primary" style="width:100%;">Submit Order</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    const TENANT_PRODUCTS = @json($products ?? []);

    function fmtPrice(n) {
        n = parseFloat(n || 0);
        return '₦' + n.toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    let fields = @json(is_string($form->fields ?? '[]') ? json_decode($form->fields, true) : ($form->fields ?? [])) || [];
    let fieldCounter = fields.length;

    // Assign IDs to existing fields
    fields = fields.map((f, i) => ({ ...f, id: i + 1 }));
    fieldCounter = fields.length;

    document.getElementById('formName').addEventListener('input', function() {
        document.getElementById('previewTitle').textContent = this.value || 'Your Form';
    });

    document.getElementById('formDescription').addEventListener('input', function() {
        document.getElementById('previewDescription').textContent = this.value;
    });

    function addField(type) {
        if (type === 'product' && fields.some(f => f.type === 'product')) {
            TensealModal.notice({
                type: 'info',
                title: 'Already added',
                message: 'Only one Product Selector field is allowed per form. Remove the existing one first if you want to re-add it.',
            });
            return;
        }

        fieldCounter++;
        const id = fieldCounter;
        const typeLabels = {
            text: 'Text Input', email: 'Email', phone: 'Phone', number: 'Number',
            textarea: 'Text Area', select: 'Dropdown', checkbox: 'Checkbox', radio: 'Radio',
            product: 'Products'
        };
        fields.push({
            id, type,
            label: typeLabels[type] || 'Field',
            name: type + '_' + id,
            required: type === 'product' ? true : false,
            placeholder: '',
            options: ['select', 'checkbox', 'radio'].includes(type) ? 'Option 1\nOption 2\nOption 3' : ''
        });
        renderFields();
        updatePreview();
    }

    function removeField(id) { fields = fields.filter(f => f.id !== id); renderFields(); updatePreview(); }

    function moveField(id, dir) {
        const idx = fields.findIndex(f => f.id === id);
        if (idx < 0) return;
        const newIdx = idx + dir;
        if (newIdx < 0 || newIdx >= fields.length) return;
        [fields[idx], fields[newIdx]] = [fields[newIdx], fields[idx]];
        renderFields();
        updatePreview();
    }

    function updateField(id, key, value) {
        const field = fields.find(f => f.id === id);
        if (field) {
            field[key] = value;
            if (key === 'label') field.name = value.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '') || field.type + '_' + id;
            updatePreview();
        }
    }

    function renderFields() {
        const list = document.getElementById('fieldsList');
        const hasOptions = ['select', 'checkbox', 'radio'];

        list.innerHTML = fields.map(f => `
            <div class="field-item" data-id="${f.id}">
                <div class="field-item-header">
                    <div class="field-item-title">
                        <i class="fas fa-grip-vertical" style="color:var(--text-muted);"></i>
                        ${f.label || 'Untitled'}
                        <span class="field-type-badge">${f.type}</span>
                    </div>
                    <div class="field-item-actions">
                        <button type="button" class="field-action-btn" onclick="moveField(${f.id}, -1)"><i class="fas fa-arrow-up"></i></button>
                        <button type="button" class="field-action-btn" onclick="moveField(${f.id}, 1)"><i class="fas fa-arrow-down"></i></button>
                        <button type="button" class="field-action-btn delete" onclick="removeField(${f.id})"><i class="fas fa-trash"></i></button>
                    </div>
                </div>
                <div class="field-config">
                    <div><label>Label</label><input type="text" value="${escHtml(f.label)}" onchange="updateField(${f.id}, 'label', this.value)"></div>
                    <div><label>Placeholder</label><input type="text" value="${escHtml(f.placeholder)}" onchange="updateField(${f.id}, 'placeholder', this.value)"></div>
                    ${hasOptions.includes(f.type) ? `<div class="full-width"><label>Options (one per line)</label><textarea onchange="updateField(${f.id}, 'options', this.value)">${escHtml(f.options)}</textarea></div>` : ''}
                    ${f.type === 'product' ? `
                        <div class="full-width" style="font-size:0.72rem; color:var(--text-muted); margin-bottom:0.4rem;">
                            <i class="fas fa-info-circle"></i> The label above is what your customer sees. Default is "Products" — change it to whatever fits your form.
                        </div>
                        ${renderProductPicker(f)}
                    ` : ''}
                    <div class="full-width"><div class="required-toggle"><input type="checkbox" ${f.required ? 'checked' : ''} onchange="updateField(${f.id}, 'required', this.checked)"><span>Required field</span></div></div>
                </div>
            </div>
        `).join('');

        document.getElementById('fieldsData').value = JSON.stringify(fields);
    }

    function updatePreview() {
        const container = document.getElementById('previewFields');
        if (fields.length === 0) {
            container.innerHTML = '<p style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:2rem 0;">Add fields to see the preview</p>';
            return;
        }
        container.innerHTML = fields.map(f => {
            const req = f.required ? ' *' : '';
            let input = '';
            switch(f.type) {
                case 'text': case 'email': case 'phone': case 'number':
                    input = `<input type="${f.type === 'phone' ? 'tel' : f.type}" placeholder="${escHtml(f.placeholder)}" disabled>`; break;
                case 'textarea':
                    input = `<textarea placeholder="${escHtml(f.placeholder)}" disabled></textarea>`; break;
                case 'select':
                    const opts = (f.options || '').split('\n').filter(o => o.trim());
                    input = `<select disabled><option value="">Select...</option>${opts.map(o => `<option>${escHtml(o.trim())}</option>`).join('')}</select>`; break;
                case 'checkbox':
                    input = `<div class="checkbox-group">${(f.options || '').split('\n').filter(o => o.trim()).map(o => `<label><input type="checkbox" disabled> ${escHtml(o.trim())}</label>`).join('')}</div>`; break;
                case 'radio':
                    input = `<div class="radio-group">${(f.options || '').split('\n').filter(o => o.trim()).map(o => `<label><input type="radio" name="preview_${f.id}" disabled> ${escHtml(o.trim())}</label>`).join('')}</div>`; break;
                case 'product':
                    const products = productsForField(f);
                    if (products.length === 0) {
                        input = `<div style="background:rgba(255,159,67,0.08); border:1px solid rgba(255,159,67,0.35); padding:0.75rem; border-radius:6px; font-size:0.78rem; color:#cc7a00;">
                            <i class="fas fa-triangle-exclamation"></i> No products picked for this field. Pick at least one on the left.
                        </div>`;
                    } else {
                        input = `<div style="background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.5rem; max-height:240px; overflow-y:auto;">
                            ${products.slice(0, 6).map(p => `
                                <div style="display:flex; align-items:center; gap:0.6rem; padding:0.5rem; border-bottom:1px solid var(--border);">
                                    <div style="width:36px; height:36px; background:var(--bg-hover); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; overflow:hidden;">
                                        ${p.image ? `<img src="${escHtml(p.image)}" style="width:100%;height:100%;object-fit:cover;">` : `<i class="fas fa-box" style="color:var(--text-muted); font-size:0.75rem;"></i>`}
                                    </div>
                                    <div style="flex:1; min-width:0;">
                                        <div style="font-weight:600; font-size:0.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${escHtml(p.name)}</div>
                                        <div style="color:var(--accent); font-weight:700; font-size:0.75rem;">${fmtPrice(p.price)}</div>
                                    </div>
                                </div>
                            `).join('')}
                            ${products.length > 6 ? `<div style="text-align:center; font-size:0.72rem; color:var(--text-muted); padding:0.4rem;">+${products.length - 6} more</div>` : ''}
                        </div>`;
                    }
                    break;
            }
            return `<div class="preview-field"><label>${escHtml(f.label)}${req}</label>${input}</div>`;
        }).join('');
    }

    function escHtml(str) { const d = document.createElement('div'); d.textContent = str || ''; return d.innerHTML; }

    // -------- Product picker (mirrors create.blade.php) --------
    function renderProductPicker(f) {
        const selected = Array.isArray(f.product_ids) ? f.product_ids.map(String) : [];
        if (TENANT_PRODUCTS.length === 0) {
            return `<div class="full-width">
                <label>Products for this form</label>
                <div style="background:rgba(255,159,67,0.08); border:1px solid rgba(255,159,67,0.35); padding:0.75rem; border-radius:6px; font-size:0.82rem; color:#cc7a00;">
                    <i class="fas fa-triangle-exclamation"></i> You have no active products yet.
                </div></div>`;
        }
        const allChecked = selected.length === 0;
        const cards = TENANT_PRODUCTS.map(p => {
            const checked = allChecked || selected.includes(String(p.id));
            const imgHtml = p.image
                ? `<img src="${escHtml(p.image)}" alt="${escHtml(p.name)}" style="width:100%; height:100%; object-fit:cover; display:block;">`
                : `<i class="fas fa-box" style="color:var(--text-muted); font-size:1rem;"></i>`;
            const discountBadge = (Array.isArray(p.discount_rules) && p.discount_rules.length)
                ? `<span style="display:inline-flex; align-items:center; gap:0.25rem; padding:0.15rem 0.5rem; border-radius:999px; font-size:0.68rem; font-weight:600; background:rgba(255,159,67,0.15); color:#cc7a00; margin-left:0.5rem;">
                     <i class="fas fa-tag" style="font-size:0.6rem;"></i> Buy ${p.discount_rules[0].min_qty}+ save ${p.discount_rules[0].discount_percent}%
                   </span>`
                : '';
            return `<label style="display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0.85rem; border:1px solid ${checked ? 'rgba(0,212,170,0.4)' : 'var(--border)'}; border-radius:8px; cursor:pointer; background:${checked ? 'rgba(0,212,170,0.06)' : 'var(--bg-card)'}; box-sizing:border-box; width:100%;">
                <input type="checkbox" value="${p.id}" ${checked ? 'checked' : ''} onchange="toggleProductForField(${f.id}, ${p.id}, this.checked)" style="flex-shrink:0; width:18px; height:18px; cursor:pointer;">
                <div style="width:48px; height:48px; flex-shrink:0; background:var(--bg-hover); border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;">
                    ${imgHtml}
                </div>
                <div style="flex:1; min-width:0; overflow:hidden;">
                    <div style="font-weight:600; font-size:0.88rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="${escHtml(p.name)}">${escHtml(p.name)}</div>
                    <div style="display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; margin-top:0.2rem;">
                        <span style="color:var(--accent); font-weight:700; font-size:0.85rem;">${fmtPrice(p.price)}</span>
                        <span style="font-size:0.72rem; color:var(--text-muted);">Stock: ${p.stock}</span>
                        ${discountBadge}
                    </div>
                </div></label>`;
        }).join('');
        return `<div class="full-width">
            <label>Products to sell on this form</label>
            <div style="display:flex; flex-direction:column; gap:0.5rem; max-height:340px; overflow-y:auto; padding:0.25rem; box-sizing:border-box;">${cards}</div>
            <div style="display:flex; gap:0.5rem; margin-top:0.5rem; font-size:0.75rem; align-items:center;">
                <button type="button" onclick="selectAllProducts(${f.id})" style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-weight:600;">Select all</button>
                <span style="color:var(--text-muted);">|</span>
                <button type="button" onclick="clearProducts(${f.id})" style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0; font-weight:600;">Clear</button>
                <span style="color:var(--text-muted); margin-left:auto;">${allChecked ? 'All products' : selected.length + ' selected'}</span>
            </div>
            <div style="font-size:0.7rem; color:var(--text-muted); margin-top:0.35rem;">Leave all checked to expose every active product. Uncheck items to restrict.</div>
        </div>`;
    }
    function toggleProductForField(fieldId, productId, checked) {
        const field = fields.find(f => f.id === fieldId);
        if (!field) return;
        if (!Array.isArray(field.product_ids) || field.product_ids.length === 0) {
            field.product_ids = TENANT_PRODUCTS.map(p => p.id);
        }
        const pid = parseInt(productId, 10);
        if (checked) {
            if (!field.product_ids.includes(pid)) field.product_ids.push(pid);
        } else {
            field.product_ids = field.product_ids.filter(id => id !== pid);
        }
        renderFields(); updatePreview();
    }
    function selectAllProducts(fieldId) {
        const field = fields.find(f => f.id === fieldId);
        if (!field) return;
        field.product_ids = []; renderFields(); updatePreview();
    }
    function clearProducts(fieldId) {
        const field = fields.find(f => f.id === fieldId);
        if (!field) return;
        field.product_ids = [-1]; renderFields(); updatePreview();
    }
    function productsForField(field) {
        if (!Array.isArray(field.product_ids) || field.product_ids.length === 0) return TENANT_PRODUCTS;
        if (field.product_ids.length === 1 && field.product_ids[0] === -1) return [];
        const ids = field.product_ids.map(String);
        return TENANT_PRODUCTS.filter(p => ids.includes(String(p.id)));
    }

    document.getElementById('formBuilder').addEventListener('submit', function() {
        document.getElementById('fieldsData').value = JSON.stringify(fields);
    });

    // Initial render
    renderFields();
    updatePreview();

    // Keep the color picker and the hex input in sync both ways.
    (function () {
        const pick = document.getElementById('primaryColorInput');
        const text = document.getElementById('primaryColorText');
        if (!pick || !text) return;
        pick.addEventListener('input', () => { text.value = pick.value; });
        text.addEventListener('input', () => {
            const v = text.value.trim();
            if (/^#[0-9A-Fa-f]{6}$/.test(v)) pick.value = v;
        });
    })();

    // ------------------------------------------------------------------
    // Default template — fields that COMPLEMENT the locked defaults.
    // Full Name / Email / Phone are always auto-collected by the embed,
    // so the template only adds what's missing from a typical Nigerian
    // e-commerce checkout flow: WhatsApp, delivery details, notes.
    // ------------------------------------------------------------------
    const DEFAULT_TEMPLATE = [
        { type: 'phone',    label: 'WhatsApp Number',  name: 'whatsapp_number',  required: true,  placeholder: 'e.g. +234 803 123 4567' },
        { type: 'textarea', label: 'Delivery Address', name: 'delivery_address', required: true,  placeholder: 'House number, street' },
        { type: 'text',     label: 'State',            name: 'state',            required: true,  placeholder: 'e.g. Lagos' },
        { type: 'text',     label: 'City',             name: 'city',             required: true,  placeholder: 'e.g. Ikeja' },
        { type: 'textarea', label: 'Order Note',       name: 'order_note',       required: false, placeholder: 'Any special instructions?' },
    ];

    function applyDefaultTemplate() {
        var doApply = function () {
            fields = DEFAULT_TEMPLATE.map(function (t) {
                return {
                    id:            ++fieldCounter,
                    type:          t.type,
                    label:         t.label,
                    name:          t.name,
                    required:      t.required,
                    placeholder:   t.placeholder,
                    options:       '',
                };
            });
            // The locked Full Name / Email / Phone block stays — the template
            // only fills the rest of the form. So we leave use_default_customer_fields
            // alone (true by default).
            restoreDefaultCustomerFields();
            renderFields();
            updatePreview();
        };

        if (fields.length === 0) {
            doApply();
            return;
        }
        TensealModal.confirm({
            type: 'warning',
            title: 'Replace existing fields?',
            message: 'Applying the default template will replace your current ' + fields.length + ' field' + (fields.length === 1 ? '' : 's') + '. The locked Full Name / Email / Phone will stay. This can’t be undone.',
            confirmText: 'Apply Template',
            cancelText: 'Keep my fields',
            onConfirm: doApply,
        });
    }

    function suppressDefaultCustomerFields() {
        document.getElementById('useDefaultCustomerFields').value = '0';
        document.getElementById('lockedDefaultsBox').style.display = 'none';
        document.getElementById('templateProvidesDefaultsBox').style.display = 'block';
    }

    function restoreDefaultCustomerFields() {
        document.getElementById('useDefaultCustomerFields').value = '1';
        document.getElementById('lockedDefaultsBox').style.display = '';
        document.getElementById('templateProvidesDefaultsBox').style.display = 'none';
    }
</script>
@endpush