@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
    $headerOption['title'] ?? 'Form Builder',
    '',
    [],
    [],
    false,
    $headerOption['header_buttons'] ?? []
))
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <div class="project-box">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <a href="{{ route('manages.web-forms.index') }}" class="btn btn-sm btn-secondary me-2">
                    <i class="bx bx-arrow-back"></i> Back
                </a>
                <strong>{{ $form->name }}</strong>
                <span class="badge bg-{{ $form->form_type == 2 ? 'info' : 'primary' }} ms-2">{{ $form->getFormTypeLabel() }}</span>
            </div>
            <button type="button" class="btn btn-success" id="btnSaveFields">
                <i class="bx bx-save me-1"></i> Save Form Fields
            </button>
        </div>

        <div class="row g-3">
            {{-- LEFT: Field Palette --}}
            <div class="col-md-3">
                <div class="card h-100">
                    <div class="card-header bg-light">
                        <strong><i class="bx bx-category me-1"></i> Field Types</strong>
                    </div>
                    <div class="card-body p-2">
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="text" data-label="Text Field">
                                <i class="bx bx-text me-2"></i> Text
                            </button>
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="email" data-label="Email Address">
                                <i class="bx bx-envelope me-2"></i> Email
                            </button>
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="phone" data-label="Phone Number">
                                <i class="bx bx-phone me-2"></i> Phone
                            </button>
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="textarea" data-label="Text Area">
                                <i class="bx bx-paragraph me-2"></i> Text Area
                            </button>
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="dropdown" data-label="Dropdown">
                                <i class="bx bx-list-ul me-2"></i> Dropdown
                            </button>
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="checkbox" data-label="Checkbox">
                                <i class="bx bx-check-square me-2"></i> Checkbox
                            </button>
                            <button class="btn btn-outline-secondary btn-sm palette-item text-start"
                                    data-field-type="date" data-label="Date">
                                <i class="bx bx-calendar me-2"></i> Date
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CENTER: Canvas --}}
            <div class="col-md-5">
                <div class="card h-100">
                    <div class="card-header bg-light d-flex justify-content-between">
                        <strong><i class="bx bx-layout me-1"></i> Form Canvas</strong>
                        <span class="badge bg-secondary" id="fieldCount">0 fields</span>
                    </div>
                    <div class="card-body p-2">
                        <div id="formCanvas"
                             class="sortable-list"
                             style="min-height:300px;border:2px dashed #dee2e6;border-radius:6px;padding:8px;">
                            <div id="canvasPlaceholder" class="text-center text-muted py-5">
                                <i class="bx bx-plus-circle bx-lg"></i>
                                <p class="mt-2 small">Click a field type on the left to add it, or drag fields to reorder.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT: Field Settings --}}
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-header bg-light">
                        <strong><i class="bx bx-cog me-1"></i> Field Settings</strong>
                    </div>
                    <div class="card-body" id="fieldSettingsPanel">
                        <div class="text-center text-muted py-4" id="noFieldSelected">
                            <i class="bx bx-mouse-alt bx-lg"></i>
                            <p class="mt-2 small">Click a field on the canvas to edit its settings.</p>
                        </div>
                        <div id="fieldSettingsContent" style="display:none;">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Label <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" id="settingLabel" placeholder="Field Label">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Placeholder</label>
                                <input type="text" class="form-control form-control-sm" id="settingPlaceholder" placeholder="e.g. Enter your name">
                            </div>
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="settingRequired">
                                    <label class="form-check-label" for="settingRequired">Required</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">Map to CRM Field</label>
                                <select class="form-select form-select-sm" id="settingCrmFieldSlug">
                                    <option value="">-- Not Mapped --</option>
                                    <optgroup label="Lead Columns">
                                        @foreach($crmFields as $cf)
                                        @if($cf['type'] == 1)
                                        <option value="{{ $cf['slug'] }}" data-crm-type="1">{{ $cf['label'] }} ({{ $cf['slug'] }})</option>
                                        @endif
                                        @endforeach
                                    </optgroup>
                                    <optgroup label="Custom Fields">
                                        @foreach($crmFields as $cf)
                                        @if($cf['type'] == 2)
                                        <option value="{{ $cf['slug'] }}" data-crm-type="2">{{ $cf['label'] }} ({{ $cf['slug'] }})</option>
                                        @endif
                                        @endforeach
                                    </optgroup>
                                </select>
                            </div>
                            <div class="mb-3" id="optionsEditorDiv" style="display:none;">
                                <label class="form-label fw-semibold">Options</label>
                                <div class="form-text mb-1">One option per line (value|Label or just label)</div>
                                <textarea class="form-control form-control-sm" id="settingOptions" rows="4"
                                          placeholder="Option 1&#10;Option 2&#10;value3|Option 3"></textarea>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary w-100" id="btnApplySettings">
                                <i class="bx bx-check me-1"></i> Apply Settings
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
(function($) {
    var formFields = {!! json_encode($fields->map(function($f) {
        return [
            'id'             => $f->id,
            'field_type'     => $f->field_type,
            'label'          => $f->label,
            'placeholder'    => $f->placeholder ?? '',
            'is_required'    => $f->is_required,
            'options_json'   => $f->options_json ?? [],
            'crm_field_slug' => $f->crm_field_slug ?? '',
            'crm_field_type' => $f->crm_field_type,
        ];
    })->values()->all(), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) !!};

    var activeFieldIndex = null;

    // Initialize SortableJS
    var sortable = Sortable.create(document.getElementById('formCanvas'), {
        animation: 150,
        handle: '.drag-handle',
        ghostClass: 'sortable-ghost',
    });

    // Pre-load existing fields
    formFields.forEach(function(field, idx) {
        addFieldToCanvas(field, idx);
    });
    updateFieldCount();

    // Palette click
    $(document).on('click', '.palette-item', function() {
        var fieldType = $(this).data('field-type');
        var label     = $(this).data('label');
        var newField  = {
            id:             null,
            field_type:     fieldType,
            label:          label,
            placeholder:    '',
            is_required:    0,
            options_json:   [],
            crm_field_slug: '',
            crm_field_type: null,
        };
        var idx = $('#formCanvas .field-card').length;
        addFieldToCanvas(newField, idx);
        updateFieldCount();
        // Scroll to bottom
        document.getElementById('formCanvas').lastElementChild.scrollIntoView({ behavior: 'smooth' });
    });

    function addFieldToCanvas(field, idx) {
        var $placeholder = $('#canvasPlaceholder');
        $placeholder.hide();

        var typeIcon = getFieldIcon(field.field_type);
        var requiredBadge = field.is_required
            ? '<span class="badge bg-danger ms-1 small">Required</span>'
            : '';

        var $card = $('<div class="field-card border rounded p-2 mb-2 bg-white cursor-pointer" data-idx="' + idx + '">')
            .html(
                '<div class="d-flex justify-content-between align-items-center">' +
                    '<div class="d-flex align-items-center gap-2">' +
                        '<span class="drag-handle text-muted" style="cursor:grab"><i class="bx bx-grid-vertical bx-sm"></i></span>' +
                        '<i class="' + typeIcon + '"></i>' +
                        '<span class="fw-semibold">' + escapeHtml(field.label) + '</span>' +
                        requiredBadge +
                    '</div>' +
                    '<div class="d-flex gap-1">' +
                        '<span class="badge bg-light text-dark">' + field.field_type + '</span>' +
                        '<button type="button" class="btn btn-xs btn-outline-danger btn-remove-field" data-idx="' + idx + '">' +
                            '<i class="bx bx-x"></i>' +
                        '</button>' +
                    '</div>' +
                '</div>'
            );

        // Store field data on element
        $card.data('field', JSON.parse(JSON.stringify(field)));

        $('#formCanvas').append($card);
    }

    // Click on field card to edit settings
    $(document).on('click', '.field-card', function(e) {
        if ($(e.target).closest('.btn-remove-field, .drag-handle').length) return;

        $('.field-card').removeClass('border-primary');
        $(this).addClass('border-primary');

        var field = $(this).data('field');
        activeFieldIndex = $(this).data('idx');

        $('#noFieldSelected').hide();
        $('#fieldSettingsContent').show();

        $('#settingLabel').val(field.label || '');
        $('#settingPlaceholder').val(field.placeholder || '');
        $('#settingRequired').prop('checked', !!field.is_required);
        $('#settingCrmFieldSlug').val(field.crm_field_slug || '');

        // Options editor
        if (field.field_type === 'dropdown' || field.field_type === 'checkbox') {
            $('#optionsEditorDiv').show();
            var optText = '';
            if (field.options_json && field.options_json.length) {
                optText = field.options_json.map(function(o) {
                    return o.value !== o.label ? o.value + '|' + o.label : o.label;
                }).join('\n');
            }
            $('#settingOptions').val(optText);
        } else {
            $('#optionsEditorDiv').hide();
        }
    });

    // Apply settings
    $('#btnApplySettings').on('click', function() {
        var $active = $('.field-card.border-primary');
        if (!$active.length) return;

        var field = $active.data('field');
        field.label         = $('#settingLabel').val();
        field.placeholder   = $('#settingPlaceholder').val();
        field.is_required   = $('#settingRequired').is(':checked') ? 1 : 0;

        var selectedOption  = $('#settingCrmFieldSlug option:selected');
        field.crm_field_slug = $('#settingCrmFieldSlug').val();
        field.crm_field_type = selectedOption.data('crm-type') || null;

        // Parse options
        if (field.field_type === 'dropdown' || field.field_type === 'checkbox') {
            var lines = $('#settingOptions').val().split('\n');
            field.options_json = lines
                .filter(function(l) { return l.trim().length > 0; })
                .map(function(l) {
                    var parts = l.split('|');
                    if (parts.length >= 2) {
                        return { value: parts[0].trim(), label: parts[1].trim() };
                    }
                    return { value: l.trim(), label: l.trim() };
                });
        }

        $active.data('field', field);

        // Update card display
        var requiredBadge = field.is_required
            ? '<span class="badge bg-danger ms-1 small">Required</span>'
            : '';
        $active.find('.fw-semibold').text(field.label);
        $active.find('.badge.bg-danger').remove();
        if (field.is_required) {
            $active.find('.fw-semibold').after(requiredBadge);
        }

        if (typeof toastr !== 'undefined') toastr.success('Settings applied.');
    });

    // Remove field
    $(document).on('click', '.btn-remove-field', function(e) {
        e.stopPropagation();
        $(this).closest('.field-card').remove();
        if (!$('#formCanvas .field-card').length) {
            $('#canvasPlaceholder').show();
        }
        updateFieldCount();
        $('#noFieldSelected').show();
        $('#fieldSettingsContent').hide();
    });

    // Save fields
    $('#btnSaveFields').on('click', function() {
        var btn = $(this);
        var fields = [];

        $('#formCanvas .field-card').each(function(idx) {
            var field = $(this).data('field');
            if (field) {
                field.display_order = idx;
                fields.push(field);
            }
        });

        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Saving...');

        $.ajax({
            url:    '{{ route("manages.web-forms.save-fields", $form->id) }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                _token: '{{ csrf_token() }}',
                fields: fields,
            }),
            success: function(res) {
                btn.prop('disabled', false).html('<i class="bx bx-save me-1"></i> Save Form Fields');
                if (res && res.status === 200) {
                    if (typeof toastr !== 'undefined') toastr.success(res.message);
                } else {
                    alert(res.message || 'Failed to save fields.');
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="bx bx-save me-1"></i> Save Form Fields');
                var msg = 'An error occurred.';
                try { msg = xhr.responseJSON.message || msg; } catch(e) {}
                alert(msg);
            }
        });
    });

    function updateFieldCount() {
        var count = $('#formCanvas .field-card').length;
        $('#fieldCount').text(count + ' field' + (count !== 1 ? 's' : ''));
    }

    function getFieldIcon(type) {
        var icons = {
            text:     'bx bx-text text-muted',
            email:    'bx bx-envelope text-primary',
            phone:    'bx bx-phone text-success',
            textarea: 'bx bx-paragraph text-muted',
            dropdown: 'bx bx-list-ul text-info',
            checkbox: 'bx bx-check-square text-warning',
            date:     'bx bx-calendar text-danger',
        };
        return icons[type] || 'bx bx-input-field text-muted';
    }

    function escapeHtml(text) {
        var map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
        return (text || '').replace(/[&<>"']/g, function(m) { return map[m]; });
    }
})(jQuery);
</script>
<style>
.field-card { transition: border-color 0.2s; cursor: pointer; }
.field-card:hover { border-color: #0d6efd !important; }
.field-card.border-primary { background-color: #f0f6ff !important; }
.sortable-ghost { opacity: 0.4; }
.cursor-pointer { cursor: pointer; }
</style>
@endpush