@extends('layouts.app')
@section('title')
    {{ __('Form Builder') }} - {{ $documentType->name }}
@endsection

@section('content')
    <div class="dashboard-content-heading mb-3">
        <h4 class="mb-1 fw-semibold">{{ __('Form Builder') }} - {{ $documentType->name }}</h4>
        <p class="mb-0 text-muted fs-13">{{ __('Build and configure the request form for this document type.') }}</p>
    </div>

    <div class="mb-3">
        <a id="form-builder-back-btn" href="{{ route('role.dashboard', ['admin_tab' => 'document-types']) }}" class="uhs-back-button btn btn-sm btn-light" data-turbo="true">
            <i class="ri-arrow-left-line me-1"></i> {{ __('Back') }}
        </a>
    </div>

    <div class="row g-3">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('Upload Template') }}</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-2" id="template-upload-help">{{ __('Upload PDF/Image for this document type.') }}</p>
                    <div id="template-upload-controls">
                        <input type="file" id="template-file-input" class="form-control" accept=".pdf,.png,.jpg,.jpeg,.webp">
                        <button id="upload-template-btn" type="button" class="btn btn-primary mt-2 w-100">{{ __('Upload Template') }}</button>
                    </div>
                    <div id="template-file-card" class="border rounded p-2" style="display:none;">
                        <div class="d-flex align-items-center justify-content-between gap-2">
                            <div class="text-truncate">
                                <div class="small text-muted">{{ __('Uploaded Template') }}</div>
                                <div id="template-file-name" class="fw-medium text-truncate"></div>
                            </div>
                            <button id="delete-template-btn" type="button" class="btn btn-sm btn-danger">{{ __('Delete') }}</button>
                        </div>
                    </div>
                    <p id="template-upload-status" class="small text-muted mt-2 mb-0"></p>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">{{ __('Field Tools') }}</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2">{{ __('Drag a tool to the template preview.') }}</p>
                    <div id="field-toolbox" class="d-grid gap-2 mb-3">
                        <div class="tool-item" draggable="true" data-type="text" data-label="Text Field">
                            <i class="ri-text"></i> {{ __('Text Field') }}
                        </div>
                        <div class="tool-item" draggable="true" data-type="date" data-label="Date Field">
                            <i class="ri-calendar-line"></i> {{ __('Date Field') }}
                        </div>
                        <div class="tool-item" draggable="true" data-type="checkbox" data-label="Checkbox">
                            <i class="ri-checkbox-line"></i> {{ __('Checkbox') }}
                        </div>
                        <div class="tool-item" draggable="true" data-type="signature" data-label="Signature">
                            <i class="ri-quill-pen-line"></i> {{ __('Signature') }}
                        </div>
                    </div>

                    <div class="alert alert-light border small mb-3" id="canvas-hint">
                        {{ __('Drag and drop fields onto the template preview.') }}
                    </div>
                    <button id="pdf-mode-toggle-btn" type="button" class="btn btn-sm btn-outline-primary w-100 mb-3" style="display:none;">
                        {{ __('Switch to Scroll PDF') }}
                    </button>

                    <h6 class="mb-2">{{ __('Placed Fields') }}</h6>
                    <div id="fields-container" class="d-flex flex-column gap-2"></div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('Payment Settings') }}</h5>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="pricing-enabled-toggle">
                        <label class="form-check-label" for="pricing-enabled-toggle">{{ __('Enable Quantity') }}</label>
                    </div>
                    <div class="mb-3" id="pricing-config-wrap" style="display:none;">
                        <label class="form-label small mb-1" for="pricing-unit-price">{{ __('Unit Price') }}</label>
                        <input type="number" id="pricing-unit-price" class="form-control form-control-sm" min="0" step="0.01" placeholder="0.00">
                        <p class="small text-muted mb-0 mt-1">{{ __('Requester total payable will be calculated as quantity x unit price.') }}</p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('Required Supporting Files') }}</h5>
                </div>
                <div class="card-body">
                    <div id="required-files-list" class="mb-2"></div>
                    <button type="button" id="add-required-file-btn" class="btn btn-primary btn-sm">{{ __('Add') }}</button>
                    <p class="text-muted small mb-0 mt-2">{{ __('Click Add, then enter required file name and quantity.') }}</p>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <button id="save-schema-btn" type="button" class="btn btn-success w-100">{{ __('Save') }}</button>
                    <p id="schema-save-status" class="small text-muted mt-2 mb-0"></p>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title mb-0">{{ __('Template Preview') }}</h5>
                    <span class="badge bg-info-subtle text-info">{{ $documentType->code }}</span>
                </div>
                <div class="card-body" id="template-preview-wrap">
                    <div id="template-preview-empty" class="text-muted">{{ __('No template uploaded yet.') }}</div>
                    <div id="builder-canvas-wrap" style="display:none;">
                        <div id="builder-canvas" class="builder-canvas">
                            <img id="template-preview-image" class="builder-canvas-image" alt="Template preview">
                            <iframe id="template-preview-pdf" class="builder-canvas-pdf" title="Template preview"></iframe>
                            <div id="builder-overlay" class="builder-overlay"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<style>
    .tool-item {
        border: 1px solid #dbe1e8;
        background: #f8fafc;
        border-radius: 6px;
        padding: 8px 10px;
        cursor: grab;
        font-size: 13px;
        user-select: none;
    }

    .tool-item:active {
        cursor: grabbing;
    }

    .builder-canvas {
        position: relative;
        width: 100%;
        border: 1px solid #e9ecef;
        overflow: hidden;
        background: #fff;
    }

    .builder-canvas-image {
        display: block;
        width: 100%;
        height: auto;
    }

    .builder-canvas-pdf {
        display: none;
        width: 100%;
        min-height: 700px;
        border: 0;
        pointer-events: auto;
    }

    .builder-canvas.pdf-mode {
        min-height: 700px;
    }

    .builder-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: auto;
    }

    .builder-overlay.accepting-drop {
        pointer-events: auto;
    }

    .builder-overlay.pdf-scroll-mode {
        display: none;
    }

    .builder-overlay.drag-over {
        box-shadow: inset 0 0 0 2px #0d6efd;
        background: rgba(13, 110, 253, 0.08);
    }

    .builder-field {
        position: absolute;
        border: 1px dashed #0d6efd;
        background: rgba(13, 110, 253, 0.12);
        color: #0d3b77;
        font-size: 12px;
        padding: 4px 6px;
        border-radius: 4px;
        cursor: move;
        min-width: 56px;
        min-height: 22px;
        overflow: visible;
        pointer-events: auto;
    }

    .builder-field-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    @media (max-width: 991.98px) {
        .builder-canvas {
            max-height: 58vh;
        }

        .builder-field {
            min-width: 44px;
            min-height: 20px;
            padding: 2px 4px;
        }

        .builder-field-size {
            right: 10px;
            bottom: 1px;
            font-size: 9px;
        }

        .tool-item {
            font-size: 12px;
            padding: 7px 9px;
        }
    }

    @media (max-width: 767.98px) {
        .builder-field-label {
            padding: 0 6px;
        }

        .builder-field-size {
            display: none;
        }

        .builder-field-resize {
            width: 16px;
            height: 16px;
        }
    }
    .builder-field-size {
        position: absolute;
        right: 16px;
        bottom: 2px;
        font-size: 10px;
        line-height: 1;
        color: #0d3b77;
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(13, 110, 253, 0.35);
        border-radius: 3px;
        padding: 1px 4px;
        pointer-events: none;
    }

    .builder-field-resize {
        position: absolute;
        right: -2px;
        bottom: -2px;
        width: 14px;
        height: 14px;
        border-radius: 2px;
        border: 1px solid #0d6efd;
        background: #ffffff;
        cursor: nwse-resize;
        z-index: 6;
        touch-action: none;
    }

    .builder-field.active {
        border-color: #dc3545;
        background: rgba(220, 53, 69, 0.12);
        color: #7a1120;
    }

    .builder-field.active .builder-field-resize {
        border-color: #dc3545;
    }

    .field-row.active {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2) inset;
    }

    .required-file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }

    .required-file-item-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .required-file-item-remove {
        flex-shrink: 0;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js" referrerpolicy="no-referrer"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
(function () {
    var csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '';

    var uploadUrl = @json(route('admin.document-types.form-builder.upload-pdf', $documentType->id));
    var deleteUrl = @json(route('admin.document-types.form-builder.delete-pdf', $documentType->id));
    var saveUrl = @json(route('admin.document-types.form-builder.save-schema', $documentType->id));
    var redirectHomeUrl = @json(route('role.dashboard', ['admin_tab' => 'document-types']));

    var previewPdf = document.getElementById('template-preview-pdf');
    var previewImage = document.getElementById('template-preview-image');
    var previewEmpty = document.getElementById('template-preview-empty');
    var builderCanvasWrap = document.getElementById('builder-canvas-wrap');
    var builderCanvas = document.getElementById('builder-canvas');
    var builderOverlay = document.getElementById('builder-overlay');
    var uploadStatus = document.getElementById('template-upload-status');
    var uploadHelp = document.getElementById('template-upload-help');
    var uploadControls = document.getElementById('template-upload-controls');
    var templateFileCard = document.getElementById('template-file-card');
    var templateFileName = document.getElementById('template-file-name');
    var deleteTemplateBtn = document.getElementById('delete-template-btn');
    var saveStatus = document.getElementById('schema-save-status');
    var pdfModeToggleBtn = document.getElementById('pdf-mode-toggle-btn');
    var fieldsContainer = document.getElementById('fields-container');
    var toolbox = document.getElementById('field-toolbox');
    var addRequiredFileBtn = document.getElementById('add-required-file-btn');
    var requiredFilesList = document.getElementById('required-files-list');
    var canvasHint = document.getElementById('canvas-hint');
    var pricingEnabledToggle = document.getElementById('pricing-enabled-toggle');
    var pricingUnitPriceInput = document.getElementById('pricing-unit-price');
    var pricingConfigWrap = document.getElementById('pricing-config-wrap');

    var fields = [];
    var nextId = 1;
    var activeFieldId = null;
    var dragContext = null;
    var toolDragActive = false;
    var canDropOnCanvas = false;
    var isPdfTemplate = false;
    var pdfInteractionMode = 'edit';
    var templateRenderToken = 0;
    var MIN_FIELD_HEIGHT = 0.015;
    var MAX_FIELD_HEIGHT = 0.25;
    var currentTemplateName = @json(!empty($documentType->template_pdf_path) ? $documentType->template_pdf_path : '');
    var backBtn = document.getElementById('form-builder-back-btn');
    var isNavigatingAway = false;
    var savedStateSignature = '';
    var unsavedWarningText = @json(__('You have unsaved changes. Please save before leaving this page.'));
    // Normalize to always be an array of {label, quantity} objects
    var requiredFiles = (@json($documentType->required_files ?? [])).map(function (item) {
        if (typeof item === 'string') {
            return { label: item, quantity: 1 };
        }

        var parsedQuantity = parseInt(item && item.quantity != null ? item.quantity : 1, 10);
        if (!isFinite(parsedQuantity) || parsedQuantity < 1) {
            parsedQuantity = 1;
        }

        return {
            label: (item && item.label ? item.label : '').toString(),
            quantity: parsedQuantity
        };
    });

    function showSuccessAlert(title, text) {
        if (typeof Swal !== 'undefined') {
            return Swal.fire(withBootstrapSwalButtons({
                icon: 'success',
                title: title,
                text: text,
                confirmButtonText: '{{ __('OK') }}'
            }));
        }

        alert(text || title);
        return Promise.resolve();
    }

    function showErrorAlert(title, text) {
        if (typeof Swal !== 'undefined') {
            return Swal.fire(withBootstrapSwalButtons({
                icon: 'error',
                title: title,
                text: text,
                confirmButtonText: '{{ __('OK') }}'
            }));
        }

        alert(text || title);
        return Promise.resolve();
    }

    function getBuilderStateSignature() {
        var normalizedFields = (fields || []).map(function (field) {
            var pos = normalizePosition(field && field.position ? field.position : {});
            return {
                type: (field && field.type ? field.type : '').toString(),
                name: (field && field.name ? field.name : '').toString(),
                label: (field && field.label ? field.label : '').toString(),
                placeholder: (field && field.placeholder ? field.placeholder : '').toString(),
                required: !!(field && field.required),
                fontSize: normalizeFontSize(field && (field.fontSize !== undefined ? field.fontSize : field.font_size)),
                position: {
                    x: Number(pos.x.toFixed(4)),
                    y: Number(pos.y.toFixed(4)),
                    width: Number(pos.width.toFixed(4)),
                    height: Number(pos.height.toFixed(4))
                }
            };
        });

        var normalizedRequiredFiles = (requiredFiles || []).map(function (item) {
            var label = (item && item.label ? item.label : item || '').toString().replace(/\s+/g, ' ').trim();
            var quantity = parseInt(item && item.quantity != null ? item.quantity : 1, 10);
            if (!isFinite(quantity) || quantity < 1) {
                quantity = 1;
            }
            return {
                label: label,
                quantity: quantity
            };
        });

        var templateNameForState = (currentTemplateName || '').toString().trim();
        var unitPrice = pricingUnitPriceInput ? Number(pricingUnitPriceInput.value || 0) : 0;

        return JSON.stringify({
            templateName: templateNameForState,
            fields: normalizedFields,
            requiredFiles: normalizedRequiredFiles,
            pricingEnabled: !!(pricingEnabledToggle && pricingEnabledToggle.checked),
            unitPrice: isFinite(unitPrice) ? unitPrice : 0
        });
    }

    function markBuilderStateSaved() {
        savedStateSignature = getBuilderStateSignature();
    }

    function hasUnsavedBuilderChanges() {
        return getBuilderStateSignature() !== savedStateSignature;
    }

    function withBootstrapSwalButtons(options) {
        var baseClasses = {
            confirmButton: 'btn btn-primary w-xs me-2 mt-2',
            cancelButton: 'btn btn-light w-xs mt-2'
        };

        return Object.assign({}, options || {}, {
            customClass: Object.assign({}, baseClasses, (options && options.customClass) ? options.customClass : {}),
            buttonsStyling: false
        });
    }

    function confirmLeaveWithUnsavedChanges(onConfirm) {
        if (typeof Swal !== 'undefined') {
            Swal.fire(withBootstrapSwalButtons({
                icon: 'warning',
                title: '{{ __('Unsaved Changes') }}',
                text: unsavedWarningText,
                showCancelButton: true,
                confirmButtonText: '{{ __('Leave Without Saving') }}',
                cancelButtonText: '{{ __('Stay') }}'
            })).then(function (result) {
                if (result.isConfirmed && typeof onConfirm === 'function') {
                    onConfirm();
                }
            });
            return;
        }

        if (window.confirm(unsavedWarningText) && typeof onConfirm === 'function') {
            onConfirm();
        }
    }

    function renderPdfAsImage(pdfUrl, renderToken) {
        if (!window.pdfjsLib || !window.pdfjsLib.getDocument) {
            return Promise.reject(new Error(@json(__('PDF renderer unavailable.'))));
        }

        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

        return window.pdfjsLib.getDocument({ url: pdfUrl }).promise
            .then(function (pdf) {
                var pageCanvases = [];
                var totalHeight = 0;
                var maxWidth = 0;
                var targetWidth = Math.max(builderCanvas.clientWidth || 900, 600);

                function renderPage(pageNumber) {
                    if (pageNumber > pdf.numPages) {
                        return Promise.resolve();
                    }

                    if (renderToken !== templateRenderToken) {
                        throw new Error('Render cancelled.');
                    }

                    return pdf.getPage(pageNumber).then(function (page) {
                        var baseViewport = page.getViewport({ scale: 1 });
                        var scale = targetWidth / baseViewport.width;
                        var viewport = page.getViewport({ scale: scale });
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d', { alpha: false });

                        canvas.width = Math.floor(viewport.width);
                        canvas.height = Math.floor(viewport.height);

                        return page.render({
                            canvasContext: context,
                            viewport: viewport
                        }).promise.then(function () {
                            pageCanvases.push(canvas);
                            totalHeight += canvas.height;
                            maxWidth = Math.max(maxWidth, canvas.width);
                            return renderPage(pageNumber + 1);
                        });
                    });
                }

                return renderPage(1).then(function () {
                    if (renderToken !== templateRenderToken) {
                        throw new Error('Render cancelled.');
                    }

                    if (!pageCanvases.length || totalHeight <= 0 || maxWidth <= 0) {
                        throw new Error(@json(__('PDF has no renderable pages.')));
                    }

                    // Browser canvases have max texture limits, so downscale if needed.
                    var maxCanvasHeight = 30000;
                    var maxCanvasWidth = 10000;
                    var finalScale = 1;

                    if (totalHeight > maxCanvasHeight) {
                        finalScale = Math.min(finalScale, maxCanvasHeight / totalHeight);
                    }

                    if (maxWidth > maxCanvasWidth) {
                        finalScale = Math.min(finalScale, maxCanvasWidth / maxWidth);
                    }

                    var stitchedCanvas = document.createElement('canvas');
                    var stitchedContext = stitchedCanvas.getContext('2d', { alpha: false });
                    var outputWidth = Math.max(1, Math.floor(maxWidth * finalScale));
                    var outputHeight = Math.max(1, Math.floor(totalHeight * finalScale));
                    var yOffset = 0;

                    stitchedCanvas.width = outputWidth;
                    stitchedCanvas.height = outputHeight;
                    stitchedContext.fillStyle = '#ffffff';
                    stitchedContext.fillRect(0, 0, outputWidth, outputHeight);

                    pageCanvases.forEach(function (canvas) {
                        var drawWidth = Math.floor(canvas.width * finalScale);
                        var drawHeight = Math.floor(canvas.height * finalScale);
                        stitchedContext.drawImage(canvas, 0, yOffset, drawWidth, drawHeight);
                        yOffset += drawHeight;
                    });

                    return stitchedCanvas.toDataURL('image/png');
                });
            });
    }

    function updateTemplateUploadUi(hasTemplate, fileName) {
        if (hasTemplate) {
            uploadHelp.style.display = 'none';
            uploadControls.style.display = 'none';
            templateFileCard.style.display = 'block';
            templateFileName.textContent = fileName || @json(__('Template file'));
            return;
        }

        uploadHelp.style.display = 'block';
        uploadControls.style.display = 'block';
        templateFileCard.style.display = 'none';
        templateFileName.textContent = '';
    }

    function sanitizeName(value) {
        return (value || '').toString().trim().toLowerCase().replace(/[^a-z0-9_]/g, '_');
    }

    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }

    function normalizeFontSize(size) {
        var fontSize = Number(size);
        if (!isFinite(fontSize)) {
            fontSize = 12;
        }
        return Math.round(clamp(fontSize, 8, 48));
    }

    function defaultWidthByType(type) {
        if (type === 'checkbox') {
            return 0.18;
        }

        if (type === 'signature') {
            return 0.28;
        }

        if (type === 'date') {
            return 0.22;
        }

        return 0.24;
    }

    function normalizePosition(pos) {
        var x = Number(pos && pos.x);
        var y = Number(pos && pos.y);
        var w = Number(pos && pos.width);
        var h = Number(pos && pos.height);

        if (!isFinite(x)) {
            x = 0.1;
        }
        if (!isFinite(y)) {
            y = 0.1;
        }
        if (!isFinite(w)) {
            w = 0.24;
        }
        if (!isFinite(h)) {
            h = 0.07;
        }

        return {
            x: clamp(x, 0, 0.95),
            y: clamp(y, 0, 0.95),
            width: clamp(w, 0.08, 0.8),
            height: clamp(h, MIN_FIELD_HEIGHT, MAX_FIELD_HEIGHT)
        };
    }

    function setActiveField(fieldId) {
        activeFieldId = fieldId;

        Array.prototype.forEach.call(builderOverlay.querySelectorAll('.builder-field'), function (el) {
            el.classList.toggle('active', el.getAttribute('data-id') === fieldId);
        });

        Array.prototype.forEach.call(fieldsContainer.querySelectorAll('.field-row'), function (el) {
            el.classList.toggle('active', el.getAttribute('data-id') === fieldId);
        });
    }

    function showTemplate(url, isImage) {
        templateRenderToken += 1;
        var renderToken = templateRenderToken;

        setDropOverlayActive(false);
        isPdfTemplate = false;
        pdfInteractionMode = 'edit';
        pdfModeToggleBtn.style.display = 'none';
        builderOverlay.classList.remove('pdf-scroll-mode');

        if (!url) {
            builderCanvasWrap.style.display = 'none';
            previewEmpty.style.display = 'block';
            canDropOnCanvas = false;
            previewImage.style.display = 'none';
            previewImage.src = '';
            previewPdf.style.display = 'none';
            previewPdf.src = '';
            builderCanvas.classList.remove('pdf-mode');
            return;
        }

        previewEmpty.style.display = 'none';
        builderCanvasWrap.style.display = 'block';
        canDropOnCanvas = true;

        if (isImage) {
            builderCanvas.classList.remove('pdf-mode');
            previewImage.onload = function () {
                renderOverlayFields();
            };
            previewImage.onerror = function () {
                renderOverlayFields();
            };
            previewImage.src = url;
            previewImage.style.display = 'block';
            // If image is already loaded (cached), onload won't fire, so call manually
            if (previewImage.complete && previewImage.naturalHeight !== 0) {
                renderOverlayFields();
            }
            previewPdf.style.display = 'none';
            previewPdf.src = '';
            previewPdf.style.pointerEvents = 'none';
            canvasHint.className = 'alert alert-success border small mb-3';
            canvasHint.textContent = @json(__('Drag tools from the left panel and drop them on the template preview.'));
            return;
        }

        canDropOnCanvas = false;
        builderCanvas.classList.remove('pdf-mode');
        previewImage.style.display = 'none';
        previewImage.src = '';
        previewPdf.style.display = 'none';
        previewPdf.src = '';
        canvasHint.className = 'alert alert-info border small mb-3';

        renderPdfAsImage(url, renderToken).then(function (imageDataUrl) {
            if (renderToken !== templateRenderToken) {
                return;
            }

            previewImage.onload = function () {
                if (renderToken !== templateRenderToken) {
                    return;
                }
                renderOverlayFields();
            };
            previewImage.onerror = function () {
                if (renderToken !== templateRenderToken) {
                    return;
                }
                renderOverlayFields();
            };
            previewImage.src = imageDataUrl;
            previewImage.style.display = 'block';
            // If image is already loaded (cached), onload won't fire, so call manually
            if (previewImage.complete && previewImage.naturalHeight !== 0) {
                renderOverlayFields();
            }
            canDropOnCanvas = true;
            canvasHint.className = 'alert alert-success border small mb-3';
        }).catch(function () {
            if (renderToken !== templateRenderToken) {
                return;
            }

            isPdfTemplate = true;
            builderCanvas.classList.add('pdf-mode');
            previewImage.style.display = 'none';
            previewImage.src = '';
            previewImage.onload = null;
            previewImage.onerror = null;
            previewPdf.src = url + '#page=1&zoom=page-width&toolbar=0&navpanes=0';
            previewPdf.style.display = 'block';
            previewPdf.style.pointerEvents = 'none';
            pdfModeToggleBtn.style.display = 'block';
            pdfModeToggleBtn.textContent = @json(__('Switch to Scroll PDF'));
            canDropOnCanvas = true;
            canvasHint.className = 'alert alert-warning border small mb-3';
            canvasHint.textContent = @json(__('PDF image rendering failed. Using fallback preview mode.'));
            renderOverlayFields();
        });
    }

    function setPdfInteractionMode(mode) {
        if (!isPdfTemplate) {
            return;
        }

        pdfInteractionMode = mode === 'scroll' ? 'scroll' : 'edit';

        if (pdfInteractionMode === 'scroll') {
            setDropOverlayActive(false);
            dragContext = null;
            builderOverlay.classList.add('pdf-scroll-mode');
            previewPdf.style.pointerEvents = 'auto';
            pdfModeToggleBtn.textContent = @json(__('Switch to Edit Fields'));
            canvasHint.className = 'alert alert-warning border small mb-3';
            canvasHint.textContent = @json(__('PDF is in Scroll mode. Switch back to Edit Fields to place or move fields.'));
            return;
        }

        builderOverlay.classList.remove('pdf-scroll-mode');
        previewPdf.style.pointerEvents = 'none';
        pdfModeToggleBtn.textContent = @json(__('Switch to Scroll PDF'));
        canvasHint.className = 'alert alert-success border small mb-3';
        canvasHint.textContent = @json(__('PDF is in Edit Fields mode. Drag tools and move fields. Use "Switch to Scroll PDF" when you need to scroll inside the PDF.'));
    }

    function makeField(field) {
        var type = field.type || 'text';
        var position = normalizePosition(field.position || {
            x: 0.1 + ((fields.length % 3) * 0.12),
            y: 0.1 + ((fields.length % 5) * 0.09),
            width: defaultWidthByType(type),
            height: 0.07
        });

        return {
            id: field.id || ('f_' + (nextId++)),
            type: type,
            name: field.name || '',
            label: field.label || '',
            placeholder: field.placeholder || '',
            required: !!field.required,
            fontSize: normalizeFontSize(field.fontSize || field.font_size),
            position: position
        };
    }

    function updateToggleSectionsVisibility() {
        if (pricingConfigWrap) {
            pricingConfigWrap.style.display = pricingEnabledToggle && pricingEnabledToggle.checked ? '' : 'none';
        }
    }

    function fieldRowTemplate(field) {
        var row = document.createElement('div');
        row.className = 'border rounded p-2 field-row';
        row.setAttribute('data-id', field.id);
        row.innerHTML = '' +
            '<div class="row g-2">' +
                '<div class="col-md-6">' +
                    '<label class="form-label mb-1 small">{{ __('Type') }}</label>' +
                    '<select class="form-select form-select-sm field-type">' +
                        '<option value="text">{{ __('Text') }}</option>' +
                        '<option value="signature">{{ __('Signature') }}</option>' +
                        '<option value="date">{{ __('Date') }}</option>' +
                        '<option value="checkbox">{{ __('Checkbox') }}</option>' +
                    '</select>' +
                '</div>' +
                '<div class="col-md-6 d-none">' +
                    '<label class="form-label mb-1 small">{{ __('Label') }}</label>' +
                    '<input type="text" class="form-control form-control-sm field-label" placeholder="Full Name">' +
                '</div>' +
                '<div class="col-md-6 d-none">' +
                    '<label class="form-label mb-1 small">{{ __('Name') }}</label>' +
                    '<input type="text" class="form-control form-control-sm field-name" placeholder="full_name">' +
                '</div>' +
                '<div class="col-md-6 d-none">' +
                    '<label class="form-label mb-1 small">{{ __('Placeholder') }}</label>' +
                    '<input type="text" class="form-control form-control-sm field-placeholder" placeholder="Enter value">' +
                '</div>' +
                '<div class="col-md-6">' +
                    '<label class="form-label mb-1 small">{{ __('Text Size (px)') }}</label>' +
                    '<input type="number" class="form-control form-control-sm field-font-size" min="8" max="48" step="1">' +
                '</div>' +
                '<div class="col-md-6 d-flex align-items-center gap-2">' +
                    '<div class="form-check mt-1">' +
                        '<input class="form-check-input field-required" type="checkbox">' +
                        '<label class="form-check-label small">{{ __('Required') }}</label>' +
                    '</div>' +
                '</div>' +
                '<div class="col-md-6 text-end">' +
                    '<button type="button" class="btn btn-sm btn-danger remove-field-btn">{{ __('Remove') }}</button>' +
                '</div>' +
            '</div>';

        row.querySelector('.field-type').value = field.type;
        row.querySelector('.field-label').value = field.label;
        row.querySelector('.field-name').value = field.name;
        row.querySelector('.field-placeholder').value = field.placeholder;
        row.querySelector('.field-font-size').value = normalizeFontSize(field.fontSize);
        row.querySelector('.field-required').checked = field.required;

        return row;
    }

    function rerenderFields() {
        fieldsContainer.innerHTML = '';

        if (!fields.length) {
            fieldsContainer.innerHTML = '<p class="text-muted mb-0">{{ __('No fields yet.') }}</p>';
            return;
        }

        fields.forEach(function (field) {
            fieldsContainer.appendChild(fieldRowTemplate(field));
        });

        setActiveField(activeFieldId);
    }

    function renderRequiredFilesList() {
        requiredFilesList.innerHTML = '';
        
        if (!requiredFiles || requiredFiles.length === 0) {
            requiredFilesList.innerHTML = '<p class="text-muted small mb-0">{{ __("No required files configured.") }}</p>';
            return;
        }

        requiredFiles.forEach(function (fileItem, index) {
            var label = (fileItem.label || fileItem || '').toString();
            var quantity = parseInt(fileItem && fileItem.quantity != null ? fileItem.quantity : 1, 10);
            if (!isFinite(quantity) || quantity < 1) {
                quantity = 1;
            }
            var item = document.createElement('div');
            item.className = 'required-file-item';
            item.innerHTML = '<div class="required-file-item-label" title="' + escapeHtml(label) + '">' + escapeHtml(label) + ' <span class="text-muted">(' + quantity + ')</span></div>' +
                '<button type="button" class="btn btn-sm btn-danger required-file-item-remove" data-index="' + index + '">{{ __("Remove") }}</button>';
            requiredFilesList.appendChild(item);
        });
    }

    function addRequiredFile(fileConfig) {
        var rawLabel = fileConfig && fileConfig.label != null ? fileConfig.label : '';
        var trimmed = (rawLabel || '').replace(/\s+/g, ' ').trim();
        var quantity = parseInt(fileConfig && fileConfig.quantity != null ? fileConfig.quantity : 1, 10);

        if (!isFinite(quantity) || quantity < 1) {
            quantity = 1;
        }

        if (!trimmed) {
            showErrorAlert('{{ __('Required file') }}', '{{ __('Please enter a file name.') }}');
            return false;
        }

        if (requiredFiles.some(function (f) { return (f.label || f || '').toString().toLowerCase() === trimmed.toLowerCase(); })) {
            showErrorAlert('{{ __('Required file') }}', '{{ __('This file name already exists.') }}');
            return false;
        }

        requiredFiles.push({ label: trimmed, quantity: quantity });
        renderRequiredFilesList();
        return true;
    }

    function promptRequiredFileName() {
        if (typeof Swal !== 'undefined') {
            return Swal.fire(withBootstrapSwalButtons({
                title: '{{ __('Required file') }}',
                html:
                    '<div class="text-start">' +
                        '<div class="row g-2 align-items-end">' +
                            '<div class="col-8">' +
                                '<label for="swal-required-file-name" class="form-label">{{ __('Enter required file name') }}</label>' +
                                '<input id="swal-required-file-name" class="swal2-input" placeholder="{{ __('e.g., ID Copy') }}" style="margin:0; width:100%;">' +
                            '</div>' +
                            '<div class="col-4">' +
                                '<label for="swal-required-file-qty" class="form-label">{{ __('Quantity') }}</label>' +
                                '<input id="swal-required-file-qty" type="number" min="1" step="1" value="1" class="swal2-input" style="margin:0; width:100%;">' +
                            '</div>' +
                        '</div>' +
                    '</div>',
                showCancelButton: true,
                confirmButtonText: '{{ __('Add') }}',
                cancelButtonText: '{{ __('Cancel') }}',
                focusConfirm: false,
                preConfirm: function () {
                    var nameInput = document.getElementById('swal-required-file-name');
                    var qtyInput = document.getElementById('swal-required-file-qty');
                    var fileName = nameInput ? nameInput.value : '';
                    var qtyRaw = qtyInput ? qtyInput.value : '1';
                    var qty = parseInt(qtyRaw, 10);

                    if (!fileName || !fileName.trim()) {
                        Swal.showValidationMessage('{{ __('Please enter a file name.') }}');
                        return false;
                    }

                    if (!isFinite(qty) || qty < 1) {
                        Swal.showValidationMessage('{{ __('Quantity must be at least 1.') }}');
                        return false;
                    }

                    return {
                        label: fileName.trim(),
                        quantity: qty
                    };
                }
            })).then(function (result) {
                if (!result.isConfirmed || !result.value) {
                    return null;
                }

                return {
                    label: (result.value.label || '').toString().trim(),
                    quantity: parseInt(result.value.quantity || 1, 10)
                };
            });
        }

        var value = window.prompt('{{ __('Enter required file name') }}');
        var trimmed = (value || '').trim();
        if (!trimmed) {
            return Promise.resolve(null);
        }

        var qtyValue = window.prompt('{{ __('Enter quantity') }}', '1');
        var qty = parseInt((qtyValue || '1').trim(), 10);
        if (!isFinite(qty) || qty < 1) {
            qty = 1;
        }

        return Promise.resolve({
            label: trimmed,
            quantity: qty
        });
    }

    function removeRequiredFile(index) {
        if (index >= 0 && index < requiredFiles.length) {
            requiredFiles.splice(index, 1);
            renderRequiredFilesList();
        }
    }

    function escapeHtml(text) {
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return (text || '').replace(/[&<>"']/g, function(m) { return map[m]; });
    }

    function readFieldsFromDom() {
        var rows = fieldsContainer.querySelectorAll('[data-id]');
        var next = [];

        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var id = row.getAttribute('data-id');
            var type = row.querySelector('.field-type').value;
            var label = row.querySelector('.field-label').value.trim();
            var name = sanitizeName(row.querySelector('.field-name').value);
            var placeholder = row.querySelector('.field-placeholder').value.trim();
            var fontSize = normalizeFontSize(row.querySelector('.field-font-size').value);
            var required = row.querySelector('.field-required').checked;
            var existingField = getFieldById(id);
            var position = existingField ? existingField.position : {
                x: 0.1,
                y: 0.1,
                width: defaultWidthByType(type),
                height: 0.07
            };

            if (!name) {
                name = sanitizeName(label);
            }

            next.push(makeField({
                id: id,
                type: type,
                label: label,
                name: name,
                placeholder: placeholder,
                fontSize: fontSize,
                required: required,
                page: 1,
                position: position
            }));
        }

        fields = next;
    }

    function getFieldById(fieldId) {
        for (var i = 0; i < fields.length; i++) {
            if (fields[i].id === fieldId) {
                return fields[i];
            }
        }

        return null;
    }

    function renderOverlayFields() {
        builderOverlay.innerHTML = '';

        fields.forEach(function (field) {
            var box = document.createElement('div');
            var fontSize = normalizeFontSize(field.fontSize);
            var responsiveFontSize = clamp(
                Math.max(fontSize, Math.round((field.position.height * 100) * 0.6), Math.round((field.position.width * 100) * 0.16)),
                10,
                24
            );
            var sampleText = field.type === 'checkbox'
                ? 'Option'
                : (field.type === 'date' ? 'Date' : 'Text');
            box.className = 'builder-field';
            box.setAttribute('data-id', field.id);
            box.style.left = (field.position.x * 100) + '%';
            box.style.top = (field.position.y * 100) + '%';
            box.style.width = (field.position.width * 100) + '%';
            box.style.height = (field.position.height * 100) + '%';
            box.innerHTML =
                '<span class="builder-field-label" style="font-size:' + responsiveFontSize + 'px;">' + sampleText + '</span>' +
                '<span class="builder-field-size">' + responsiveFontSize + 'px</span>' +
                '<span class="builder-field-resize" data-resize="1"></span>';
            builderOverlay.appendChild(box);
        });

        setActiveField(activeFieldId);
    }

    function setDropOverlayActive(active) {
        if (active && toolDragActive && canDropOnCanvas) {
            builderOverlay.classList.add('accepting-drop');
            return;
        }

        builderOverlay.classList.remove('accepting-drop');
        builderOverlay.classList.remove('drag-over');
    }

    function addFieldFromTool(type, label, x, y) {
        // Generate a unique field name based on type and a counter
        var typePrefix = sanitizeName(label || type);
        var counter = 1;
        var fieldName = typePrefix;
        
        // Ensure the field name is unique by checking existing fields
        while (fields.some(function(f) { return f.name === fieldName; })) {
            fieldName = typePrefix + '_' + (counter++);
        }
        
        var field = makeField({
            type: type,
            label: label || '',
            name: fieldName,
            placeholder: '',
            required: false,
            position: {
                x: clamp(x, 0, 0.95),
                y: clamp(y, 0, 0.95),
                width: defaultWidthByType(type),
                height: 0.07
            }
        });

        fields.push(field);
        activeFieldId = field.id;
        rerenderFields();
        renderOverlayFields();
    }

    function updateFieldPosition(fieldId, x, y) {
        var field = getFieldById(fieldId);
        if (!field) {
            return;
        }

        field.position.x = clamp(x, 0, 1 - field.position.width);
        field.position.y = clamp(y, 0, 1 - field.position.height);
        renderOverlayFields();
        rerenderFields();
    }

    function updateFieldSize(fieldId, width, height) {
        var field = getFieldById(fieldId);
        if (!field) {
            return;
        }

        var maxWidth = 1 - field.position.x;
        var maxHeight = 1 - field.position.y;

        field.position.width = clamp(width, 0.08, Math.min(0.8, maxWidth));
        field.position.height = clamp(height, MIN_FIELD_HEIGHT, Math.min(MAX_FIELD_HEIGHT, maxHeight));

        renderOverlayFields();
        rerenderFields();
    }

    toolbox.addEventListener('dragstart', function (event) {
        if (isPdfTemplate && pdfInteractionMode === 'scroll') {
            setPdfInteractionMode('edit');
        }

        var tool = event.target.closest('.tool-item');
        if (!tool) {
            return;
        }

        event.dataTransfer.setData('application/json', JSON.stringify({
            type: tool.getAttribute('data-type') || 'text',
            label: tool.getAttribute('data-label') || 'Field'
        }));

        toolDragActive = true;
        setDropOverlayActive(true);
    });

    toolbox.addEventListener('dragend', function () {
        toolDragActive = false;
        setDropOverlayActive(false);
    });

    window.addEventListener('dragend', function () {
        toolDragActive = false;
        setDropOverlayActive(false);
    });

    window.addEventListener('drop', function () {
        toolDragActive = false;
        setDropOverlayActive(false);
    });

    window.addEventListener('blur', function () {
        toolDragActive = false;
        setDropOverlayActive(false);
    });

    builderOverlay.addEventListener('wheel', function (event) {
        if (!isPdfTemplate || pdfInteractionMode !== 'edit') {
            return;
        }

        if (toolDragActive || dragContext) {
            return;
        }

        event.preventDefault();
        window.scrollBy(0, event.deltaY);
    }, { passive: false });

    pdfModeToggleBtn.addEventListener('click', function () {
        if (!isPdfTemplate) {
            return;
        }

        setPdfInteractionMode(pdfInteractionMode === 'edit' ? 'scroll' : 'edit');
    });

    builderOverlay.addEventListener('dragover', function (event) {
        if (!canDropOnCanvas) {
            return;
        }

        event.preventDefault();
        builderOverlay.classList.add('drag-over');
    });

    builderOverlay.addEventListener('dragleave', function () {
        builderOverlay.classList.remove('drag-over');
    });

    builderOverlay.addEventListener('drop', function (event) {
        if (!canDropOnCanvas) {
            return;
        }

        event.preventDefault();
        toolDragActive = false;
        setDropOverlayActive(false);
        builderOverlay.classList.remove('drag-over');

        var dataRaw = event.dataTransfer.getData('application/json');
        if (!dataRaw) {
            return;
        }

        var payload = null;
        try {
            payload = JSON.parse(dataRaw);
        } catch (e) {
            return;
        }

        if (!payload || !payload.type) {
            return;
        }

        var rect = builderOverlay.getBoundingClientRect();
        var x = (event.clientX - rect.left) / rect.width;
        var y = (event.clientY - rect.top) / rect.height;
        addFieldFromTool(payload.type, payload.label, x, y);
    });

    builderCanvas.addEventListener('mousedown', function (event) {
        var resizeHandle = event.target.closest('.builder-field-resize');
        if (resizeHandle) {
            var resizeField = resizeHandle.closest('.builder-field');
            if (!resizeField) {
                return;
            }

            var resizeFieldId = resizeField.getAttribute('data-id');
            var resizeModel = getFieldById(resizeFieldId);
            if (!resizeModel) {
                return;
            }

            dragContext = {
                mode: 'resize',
                fieldId: resizeFieldId,
                startClientX: event.clientX,
                startClientY: event.clientY,
                startWidth: resizeModel.position.width,
                startHeight: resizeModel.position.height
            };

            setActiveField(resizeFieldId);
            event.preventDefault();
            return;
        }

        var target = event.target.closest('.builder-field');
        if (!target) {
            return;
        }

        var fieldId = target.getAttribute('data-id');
        var field = getFieldById(fieldId);
        if (!field) {
            return;
        }

        var rect = builderOverlay.getBoundingClientRect();
        dragContext = {
            mode: 'move',
            fieldId: fieldId,
            offsetX: (event.clientX - rect.left) / rect.width - field.position.x,
            offsetY: (event.clientY - rect.top) / rect.height - field.position.y
        };

        setActiveField(fieldId);
        event.preventDefault();
    });

    window.addEventListener('mousemove', function (event) {
        if (!dragContext) {
            return;
        }

        var rect = builderOverlay.getBoundingClientRect();

        if (dragContext.mode === 'resize') {
            var deltaX = (event.clientX - dragContext.startClientX) / rect.width;
            var deltaY = (event.clientY - dragContext.startClientY) / rect.height;
            updateFieldSize(
                dragContext.fieldId,
                dragContext.startWidth + deltaX,
                dragContext.startHeight + deltaY
            );
            return;
        }

        var x = (event.clientX - rect.left) / rect.width - dragContext.offsetX;
        var y = (event.clientY - rect.top) / rect.height - dragContext.offsetY;
        updateFieldPosition(dragContext.fieldId, x, y);
    });

    window.addEventListener('mouseup', function () {
        dragContext = null;
    });

    fieldsContainer.addEventListener('click', function (event) {
        var removeBtn = event.target.closest('.remove-field-btn');
        var row = event.target.closest('[data-id]');

        if (row) {
            setActiveField(row.getAttribute('data-id'));
        }

        if (!removeBtn) {
            return;
        }

        if (!row) {
            return;
        }

        var id = row.getAttribute('data-id');
        fields = fields.filter(function (field) { return field.id !== id; });

        if (activeFieldId === id) {
            activeFieldId = fields.length ? fields[0].id : null;
        }

        rerenderFields();
        renderOverlayFields();
    });

    fieldsContainer.addEventListener('input', function () {
        readFieldsFromDom();
        renderOverlayFields();
    });

    document.getElementById('upload-template-btn').addEventListener('click', function () {
        var fileInput = document.getElementById('template-file-input');
        var selected = fileInput.files && fileInput.files[0] ? fileInput.files[0] : null;

        if (!selected) {
            uploadStatus.textContent = @json(__('Please choose a template file first.'));
            uploadStatus.className = 'small text-danger mt-2 mb-0';
            return;
        }

        var data = new FormData();
        data.append('pdf_file', selected);

        uploadStatus.textContent = @json(__('Uploading...'));
        uploadStatus.className = 'small text-muted mt-2 mb-0';

        fetch(uploadUrl, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: data
        }).then(function (response) {
            return response.json().then(function (payload) {
                return { ok: response.ok, payload: payload };
            });
        }).then(function (result) {
            if (!result.ok) {
                throw new Error((result.payload && result.payload.message) ? result.payload.message : @json(__('Upload failed.')));
            }

            showTemplate(result.payload.pdf_url, !!result.payload.is_image);
            currentTemplateName = (result.payload && result.payload.pdf_name) ? result.payload.pdf_name : (selected ? selected.name : '');
            updateTemplateUploadUi(true, currentTemplateName);
            uploadStatus.textContent = @json(__('Template uploaded successfully.'));
            uploadStatus.className = 'small text-success mt-2 mb-0';
            fileInput.value = '';
            showSuccessAlert('{{ __('Uploaded') }}', '{{ __('Template uploaded successfully.') }}');
        }).catch(function (error) {
            uploadStatus.textContent = error.message || @json(__('Upload failed.'));
            uploadStatus.className = 'small text-danger mt-2 mb-0';
        });
    });

    deleteTemplateBtn.addEventListener('click', function () {
        uploadStatus.textContent = @json(__('Deleting template...'));
        uploadStatus.className = 'small text-muted mt-2 mb-0';

        fetch(deleteUrl, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        }).then(function (response) {
            return response.json().then(function (payload) {
                return { ok: response.ok, payload: payload };
            });
        }).then(function (result) {
            if (!result.ok) {
                throw new Error((result.payload && result.payload.message) ? result.payload.message : @json(__('Delete failed.')));
            }

            currentTemplateName = '';
            fields = [];
            activeFieldId = null;
            rerenderFields();
            renderOverlayFields();
            showTemplate(null, false);
            updateTemplateUploadUi(false, '');
            uploadStatus.textContent = @json(__('Template deleted successfully.'));
            uploadStatus.className = 'small text-success mt-2 mb-0';
            showSuccessAlert('{{ __('Deleted') }}', '{{ __('Template deleted successfully.') }}');
        }).catch(function (error) {
            uploadStatus.textContent = error.message || @json(__('Delete failed.'));
            uploadStatus.className = 'small text-danger mt-2 mb-0';
        });
    });

    document.getElementById('save-schema-btn').addEventListener('click', function () {
        readFieldsFromDom();

        var schema = {
            version: 2,
            fields: fields.map(function (field) {
                return {
                    id: field.id,
                    type: field.type,
                    name: field.name,
                    label: field.label,
                    placeholder: field.placeholder,
                    font_size: field.fontSize,
                    required: field.required,
                    page: 1,
                    position: {
                        x: field.position.x,
                        y: field.position.y,
                        width: field.position.width,
                        height: field.position.height
                    }
                };
            }),
            pages: [
                {
                    number: 1,
                    fields: fields.map(function (field) {
                        return {
                            id: field.id,
                            type: field.type,
                            name: field.name,
                            label: field.label,
                            placeholder: field.placeholder,
                            font_size: field.fontSize,
                            required: field.required,
                            page: 1,
                            position: {
                                x: field.position.x,
                                y: field.position.y,
                                width: field.position.width,
                                height: field.position.height
                            }
                        };
                    })
                }
            ]
        };

        schema.pricing = {
            enabled: !!(pricingEnabledToggle && pricingEnabledToggle.checked),
            unit_price: pricingUnitPriceInput ? Number(pricingUnitPriceInput.value || 0) : 0,
            quantity_field_name: '__extra_quantity'
        };

        saveStatus.textContent = @json(__('Saving...'));
        saveStatus.className = 'small text-muted mt-2 mb-0';

        fetch(saveUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                form_schema: schema,
                required_files: requiredFiles.map(function (item) {
                    var label = (item && item.label ? item.label : '').toString().trim();
                    var quantity = parseInt(item && item.quantity != null ? item.quantity : 1, 10);
                    if (!isFinite(quantity) || quantity < 1) {
                        quantity = 1;
                    }

                    return {
                        label: label,
                        quantity: quantity
                    };
                }).filter(function (item) {
                    return item.label !== '';
                })
            })
        }).then(function (response) {
            return response.json().then(function (payload) {
                return { ok: response.ok, payload: payload };
            });
        }).then(function (result) {
            if (!result.ok) {
                throw new Error((result.payload && result.payload.message) ? result.payload.message : @json(__('Save failed.')));
            }

            markBuilderStateSaved();
            saveStatus.textContent = @json(__('Saved successfully. Redirecting...'));
            saveStatus.className = 'small text-success mt-2 mb-0';

            if (typeof Swal !== 'undefined') {
                Swal.fire(withBootstrapSwalButtons({
                    icon: 'success',
                    title: '{{ __('Saved!') }}',
                    text: '{{ __('Form and required files were saved successfully.') }}',
                    confirmButtonText: '{{ __('Go Home') }}'
                })).then(function () {
                    isNavigatingAway = true;
                    if (typeof window.navigateDashboardContent === 'function') {
                        window.navigateDashboardContent(redirectHomeUrl);
                    } else {
                        window.location.assign(redirectHomeUrl);
                    }
                });
                return;
            }

            isNavigatingAway = true;
            if (typeof window.navigateDashboardContent === 'function') {
                window.navigateDashboardContent(redirectHomeUrl);
            } else {
                window.location.assign(redirectHomeUrl);
            }
        }).catch(function (error) {
            saveStatus.textContent = error.message || @json(__('Save failed.'));
            saveStatus.className = 'small text-danger mt-2 mb-0';
        });
    });

    fields = Array.isArray(@json(($documentType->form_schema['fields'] ?? [])))
        ? @json(($documentType->form_schema['fields'] ?? []))
        : [];

    var loadedPricingConfig = @json(($documentType->form_schema['pricing'] ?? []));

    fields = fields.map(function (field) {
        return makeField(field);
    });

    // Continue numeric IDs after already-loaded fields to avoid duplicate IDs.
    var maxExistingId = 0;
    fields.forEach(function (field) {
        var match = /^f_(\d+)$/.exec((field && field.id) ? String(field.id) : '');
        if (match) {
            var num = parseInt(match[1], 10);
            if (isFinite(num) && num > maxExistingId) {
                maxExistingId = num;
            }
        }
    });
    if (maxExistingId >= nextId) {
        nextId = maxExistingId + 1;
    }

    if (pricingUnitPriceInput) {
        var loadedUnitPrice = Number(loadedPricingConfig && loadedPricingConfig.unit_price !== undefined ? loadedPricingConfig.unit_price : 0);
        pricingUnitPriceInput.value = isFinite(loadedUnitPrice) ? loadedUnitPrice : 0;
    }

    if (pricingEnabledToggle) {
        pricingEnabledToggle.checked = !!(loadedPricingConfig && loadedPricingConfig.enabled);
    }

    updateToggleSectionsVisibility();

    if (pricingEnabledToggle) {
        pricingEnabledToggle.addEventListener('change', updateToggleSectionsVisibility);
    }

    rerenderFields();
    renderOverlayFields();
    renderRequiredFilesList();

    addRequiredFileBtn.addEventListener('click', function () {
        promptRequiredFileName().then(function (fileName) {
            if (addRequiredFile(fileName)) {
                showSuccessAlert('{{ __('Added') }}', '{{ __('Required file added successfully.') }}');
            }
        });
    });

    requiredFilesList.addEventListener('click', function (event) {
        var removeBtn = event.target.closest('.required-file-item-remove');
        if (removeBtn) {
            var index = parseInt(removeBtn.getAttribute('data-index'), 10);
            if (isFinite(index)) {
                removeRequiredFile(index);
                showSuccessAlert('{{ __('Removed') }}', '{{ __('Required file removed successfully.') }}');
            }
        }
    });

    updateTemplateUploadUi(!!currentTemplateName, currentTemplateName);
    showTemplate(
        @json($templatePdfUrl ?? null),
        @json(!empty($documentType->template_pdf_path) && strtolower(pathinfo($documentType->template_pdf_path, PATHINFO_EXTENSION)) !== 'pdf')
    );

    markBuilderStateSaved();

    if (backBtn) {
        backBtn.addEventListener('click', function (event) {
            if (isNavigatingAway || !hasUnsavedBuilderChanges()) {
                return;
            }

            event.preventDefault();
            var targetUrl = backBtn.getAttribute('href') || redirectHomeUrl;
            confirmLeaveWithUnsavedChanges(function () {
                isNavigatingAway = true;
                if (typeof window.navigateDashboardContent === 'function') {
                    window.navigateDashboardContent(targetUrl);
                } else {
                    window.location.assign(targetUrl);
                }
            });
        });
    }

    window.addEventListener('beforeunload', function (event) {
        if (isNavigatingAway || !hasUnsavedBuilderChanges()) {
            return;
        }

        event.preventDefault();
        event.returnValue = '';
    });
})();
</script>
@endsection

{{-- Pre-populate selected values for editing --}}
<script>
    (function initializeSelectedFormBuilderValues() {
        const selectedOrganization = @json($selectedOrganization ?? null);
        const selectedFields = @json($selectedFields ?? []);

        const organizationSelect = document.querySelector('#organization-select');
        if (selectedOrganization && organizationSelect) {
            organizationSelect.value = selectedOrganization;
        }

        selectedFields.forEach(field => {
            const fieldElement = document.querySelector(`[data-type="${field.type}"]`);
            if (fieldElement) {
                fieldElement.setAttribute('data-selected', 'true');
            }
        });
    })();
</script>

{{-- Display validation warnings --}}
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif