@extends('layouts.main')
@section('title', 'PDF Tool')
@section('container')
<style>
    .wizard-step { display: none; }
    .wizard-step.active { display: block; }
    .step-pill {
        border: 1px solid #ddd;
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 12px;
        margin-right: 6px;
        background: #f8f9fa;
    }
    .step-pill.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
    .preview-wrap { max-height: 70vh; overflow: auto; border: 1px solid #ddd; padding: 8px; resize: vertical; }
    #mapped-preview, #final-preview { min-height: 520px; }
    #mapped-preview table, #final-preview table { min-width: max-content; }
    .preview-wrap .excel-table { width: 100%; border-collapse: collapse; table-layout: auto; }
    .preview-wrap .excel-table td, .preview-wrap .excel-table th {
        border: 1px solid #000;
        padding: 4px;
        vertical-align: top;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
    .rules-box { border: 1px solid #d9d9d9; border-radius: 8px; padding: 12px; background: #fafafa; }
    .rules-report { font-size: 12px; max-height: 180px; overflow: auto; }
</style>

<div class="row">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header d-flex justify-content-between align-items-center p-3" style="background: var(--secondary);">
                <h4 class="card-title text-white mb-0">PDF Tool Wizard</h4>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <span class="step-pill active" id="pill-1">1. Upload Design</span>
                    <span class="step-pill" id="pill-2">2. Select Dynamic Model</span>
                    <span class="step-pill" id="pill-3">3. Map Sections</span>
                    <span class="step-pill" id="pill-4">4. Preview & Confirm</span>
                </div>

                <div id="error-box" class="alert alert-danger d-none"></div>
                <div id="success-box" class="alert alert-success d-none"></div>

                <div class="wizard-step active" id="step-1">
                    <h5 class="mb-2">Step 1: Excel Design Upload</h5>
                    <form id="step1-form" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-2 align-items-end">
                            <div class="col-md-4">
                                <label class="form-label">Excel Design File</label>
                                <input type="file" name="excel_file" class="form-control" accept=".xlsx,.xls,.xlsm,.xltx,.xltm" required>
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">Start Row</label>
                                <input type="number" name="start_row" class="form-control" value="1" min="1" required>
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">End Row</label>
                                <input type="number" name="end_row" class="form-control" value="100" min="1" required>
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">Start Col</label>
                                <input type="text" name="start_col" class="form-control" value="A" required>
                            </div>
                            <div class="col-md-1">
                                <label class="form-label">End Col</label>
                                <input type="text" name="end_col" class="form-control" value="Z" required>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary w-100" id="step1-btn" type="submit">Upload</button>
                            </div>
                        </div>
                    </form>
                    <div class="mt-3 preview-wrap" id="design-preview"></div>
                    <div class="mt-3">
                        <button class="btn btn-secondary" id="to-step-2" disabled>Design Looks Good, Next</button>
                    </div>
                </div>

                <div class="wizard-step" id="step-2">
                    <h5 class="mb-2">Step 2: Choose Dynamic Data Model</h5>
                    <form id="step2-form">
                        @csrf
                        <div class="row g-2">
                            <div class="col-md-3">
                                <label class="form-label">Company</label>
                                <select id="company_id" name="company_id" class="form-control" required>
                                    <option value="">Select Company</option>
                                    @foreach($companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Zone</label>
                                <select id="zone_id" name="zone_id" class="form-control" required>
                                    <option value="">Select Zone</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Unit</label>
                                <select id="unit_id" name="unit_id" class="form-control" required>
                                    <option value="">Select Unit</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Project</label>
                                <select id="project_id" name="project_id" class="form-control" required>
                                    <option value="">Select Project</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Distributor (Status &gt; 2 + template match)</label>
                                <select id="distributor_id" name="distributor_id" class="form-control" required>
                                    <option value="">Select Distributor</option>
                                </select>
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <button class="btn btn-primary" id="step2-btn" type="submit">Save Context</button>
                            </div>
                        </div>
                    </form>
                    <div class="mt-3" id="context-box"></div>
                    <div class="mt-3">
                        <button class="btn btn-outline-secondary" id="back-1">Back</button>
                        <button class="btn btn-secondary" id="to-step-3" disabled>Next: Map Sections</button>
                    </div>
                </div>

                <div class="wizard-step" id="step-3">
                    <h5 class="mb-2">Step 3: Map Excel Row Ranges with Dynamic Sections</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm" id="mapping-table">
                            <thead>
                                <tr>
                                    <th>From Row</th>
                                    <th>To Row</th>
                                    <th>Section</th>
                                    <th>Distributor Width</th>
                                    <th>Title Row (Bookstock)</th>
                                    <th>Data Row (Bookstock)</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <button class="btn btn-outline-primary btn-sm" id="add-map-row">Add Mapping Row</button>
                    <div class="mt-3">
                        <button class="btn btn-primary" id="step3-btn">Generate Look Preview</button>
                    </div>
                    <div class="mt-3 preview-wrap" id="mapped-preview"></div>
                    <div class="mt-3">
                        <button class="btn btn-outline-secondary" id="back-2">Back</button>
                        <button class="btn btn-secondary" id="to-step-4" disabled>Next: Confirm & PDF</button>
                    </div>
                </div>

                <div class="wizard-step" id="step-4">
                    <h5 class="mb-2">Step 4: Final Preview and PDF Download</h5>
                    <div class="rules-box mb-3">
                        <div class="row g-2 align-items-end">
                            <div class="col-md-4">
                                <label class="form-label">Advanced Preset</label>
                                <select id="rule_preset" class="form-control">
                                    <option value="">Select preset</option>
                                    <option value="standard">Standard Bookstock</option>
                                    <option value="exception">Exception Report</option>
                                    <option value="summary">Short Summary</option>
                                </select>
                            </div>
                            <div class="col-md-8 text-md-end">
                                <button class="btn btn-outline-primary btn-sm" id="apply_rule_preset" type="button">Apply Preset</button>
                                <button class="btn btn-outline-success btn-sm" id="validate_rules_btn" type="button">Validate Rules</button>
                                <button class="btn btn-outline-secondary btn-sm" id="clear_rules_btn" type="button">Clear Rules</button>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Rules JSON</label>
                                <textarea id="rules_json" class="form-control" rows="8" placeholder='{"bookstock":{"filters":[],"computed_columns":[],"formatters":[],"sort":[],"fallbacks":[]}}'></textarea>
                                <small class="text-muted">Supported: filters, computed_columns, formatters, sort, fallbacks, limit. Section keys: distributor, bookstock, audit, all.</small>
                            </div>
                            <div class="col-12">
                                <div id="rules_report" class="rules-report"></div>
                            </div>
                        </div>
                    </div>
                    <form id="step4-form">
                        @csrf
                        <div class="row g-2 align-items-end">
                            <div class="col-md-6">
                                <label class="form-label">Template Name</label>
                                <input type="text" name="template_name" id="template_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <button class="btn btn-success" id="step4-btn" type="submit">Confirm and Generate PDF</button>
                            </div>
                        </div>
                    </form>
                    <div class="mt-3 preview-wrap" id="final-preview"></div>
                    <div class="mt-3">
                        <button class="btn btn-outline-secondary" id="back-3">Back</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}">
let uploadToken = '';
let allZones = [];
let allUnits = [];
let allProjects = [];
let sectionOptions = [];
let latestMappings = [];
let selectedRange = { start_row: 1, end_row: 1, start_col: 1, end_col: 1 };
const RULE_PRESETS = {
    standard: {
        bookstock: {
            formatters: [
                { column: 'Item Mrp', type: 'number', decimals: 2 },
                { column: 'Item Rate', type: 'number', decimals: 2 },
                { column: 'Difference', type: 'number', decimals: 2 }
            ],
            fallbacks: [
                { column: 'Remark', value: '-' }
            ],
            sort: [{ column: 'SR No', dir: 'asc' }]
        }
    },
    exception: {
        bookstock: {
            filters: [{ column: 'Difference', op: 'neq', value: '0.00' }],
            sort: [{ column: 'Difference', dir: 'desc' }]
        }
    },
    summary: {
        bookstock: {
            computed_columns: [
                { name: 'DiffPct', left: 'Difference', operator: '%', right: 'Item Qty', decimals: 2 }
            ],
            limit: 50
        }
    }
};

function safe(text) {
    return String(text ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function showError(msg) {
    $('#error-box').removeClass('d-none').html(safe(msg));
}

function clearError() {
    $('#error-box').addClass('d-none').empty();
}

function showSuccess(msg) {
    $('#success-box').removeClass('d-none').html(msg);
}

function clearSuccess() {
    $('#success-box').addClass('d-none').empty();
}

function gotoStep(stepNo) {
    $('.wizard-step').removeClass('active');
    $('#step-' + stepNo).addClass('active');
    $('.step-pill').removeClass('active');
    $('#pill-' + stepNo).addClass('active');
}

function resetSelect(selector, placeholder) {
    $(selector).empty().append(`<option value="">${placeholder}</option>`);
}

function sectionSelectHtml(value = '') {
    let html = '<select class="form-control map-section">';
    html += '<option value="">Select Section</option>';
    sectionOptions.forEach(opt => {
        const selected = value === opt.key ? 'selected' : '';
        html += `<option value="${safe(opt.key)}" ${selected}>${safe(opt.label)}</option>`;
    });
    html += '</select>';
    return html;
}

function toggleBookstockRowFields($tr) {
    const section = $tr.find('.map-section').val();
    const isBookstock = section === 'bookstock';
    const isDistributor = section === 'distributor';
    $tr.find('.map-dist-width').prop('disabled', !isDistributor);
    if (!isDistributor) {
        $tr.find('.map-dist-width').val('');
    }
    $tr.find('.map-title-row, .map-data-row').prop('disabled', !isBookstock);
    if (!isBookstock) {
        $tr.find('.map-title-row, .map-data-row').val('');
    }
}

function addMappingRow(from = '', to = '', section = '', distWidth = '', titleRow = '', dataRow = '') {
    $('#mapping-table tbody').append(`
        <tr>
            <td><input type="number" class="form-control map-from" min="1" value="${safe(from)}"></td>
            <td><input type="number" class="form-control map-to" min="1" value="${safe(to)}"></td>
            <td>${sectionSelectHtml(section)}</td>
            <td>
                <select class="form-control map-dist-width">
                    <option value="">Default</option>
                    <option value="50" ${String(distWidth) === '50' ? 'selected' : ''}>50%</option>
                    <option value="100" ${String(distWidth) === '100' ? 'selected' : ''}>100%</option>
                </select>
            </td>
            <td><input type="number" class="form-control map-title-row" min="1" value="${safe(titleRow)}" placeholder="e.g. 12"></td>
            <td><input type="number" class="form-control map-data-row" min="1" value="${safe(dataRow)}" placeholder="e.g. 13"></td>
            <td><button class="btn btn-sm btn-outline-danger remove-map">Remove</button></td>
        </tr>
    `);
    toggleBookstockRowFields($('#mapping-table tbody tr').last());
}

function collectMappings() {
    const mappings = [];
    $('#mapping-table tbody tr').each(function() {
        const fromRow = Number($(this).find('.map-from').val());
        const toRow = Number($(this).find('.map-to').val());
        const section = $(this).find('.map-section').val();
        const distWidth = Number($(this).find('.map-dist-width').val());
        const titleRow = Number($(this).find('.map-title-row').val());
        const dataRow = Number($(this).find('.map-data-row').val());
        if (fromRow && toRow && section) {
            const item = { from_row: fromRow, to_row: toRow, section: section };
            if (section === 'distributor' && (distWidth === 50 || distWidth === 100)) {
                item.distributor_width = distWidth;
            }
            if (section === 'bookstock') {
                if (titleRow) item.bookstock_title_row = titleRow;
                if (dataRow) item.bookstock_data_row = dataRow;
            }
            mappings.push(item);
        }
    });
    return mappings;
}

$(document).ready(function() {
    $.get('zonestable', function(data) { allZones = data.data || data; });
    $.get('unitstable', function(data) { allUnits = data.data || data; });
    $.get('projectstable', function(data) { allProjects = data.data || data; });

    $('#step1-form').on('submit', function(e) {
        e.preventDefault();
        clearError(); clearSuccess();

        const fd = new FormData(this);
        $('#step1-btn').prop('disabled', true).text('Uploading...');

        $.ajax({
            url: '{{ route('pdftool.preview') }}',
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function(res) {
                uploadToken = res.upload_token;
                selectedRange = res.range || selectedRange;
                $('#design-preview').html(res.design_html || '');
                $('#to-step-2').prop('disabled', false);
                showSuccess(`Design preview loaded. Sheet: ${safe(res.sheet_name)} | Range: R${safe(selectedRange.start_row)}-R${safe(selectedRange.end_row)}, C${safe(selectedRange.start_col)}-C${safe(selectedRange.end_col)}`);
            },
            error: function(xhr) {
                showError(xhr.responseJSON?.message || 'Upload failed');
            },
            complete: function() {
                $('#step1-btn').prop('disabled', false).text('Upload');
            }
        });
    });

    $('#to-step-2').on('click', function() {
        gotoStep(2);
    });

    $('#company_id').on('change', function() {
        const companyId = $(this).val();
        resetSelect('#zone_id', 'Select Zone');
        resetSelect('#unit_id', 'Select Unit');
        resetSelect('#project_id', 'Select Project');
        resetSelect('#distributor_id', 'Select Distributor');
        if (!companyId) return;

        allZones.filter(z => String(z.company_id) === String(companyId)).forEach(z => {
            $('#zone_id').append(`<option value="${z.id}">${safe(z.name)}</option>`);
        });
    });

    $('#zone_id').on('change', function() {
        const zoneId = $(this).val();
        resetSelect('#unit_id', 'Select Unit');
        resetSelect('#project_id', 'Select Project');
        resetSelect('#distributor_id', 'Select Distributor');
        if (!zoneId) return;

        allUnits.filter(u => String(u.zone_id) === String(zoneId)).forEach(u => {
            $('#unit_id').append(`<option value="${u.id}">${safe(u.name)}</option>`);
        });
    });

    $('#unit_id').on('change', function() {
        const unitId = $(this).val();
        resetSelect('#project_id', 'Select Project');
        resetSelect('#distributor_id', 'Select Distributor');
        if (!unitId) return;

        allProjects.filter(p => String(p.unit_id) === String(unitId)).forEach(p => {
            $('#project_id').append(`<option value="${p.id}">${safe(p.project_name)}</option>`);
        });
    });

    $('#project_id').on('change', function() {
        const projectId = $(this).val();
        resetSelect('#distributor_id', 'Select Distributor');
        if (!projectId) return;

        $.get('{{ route('pdftool.distributors') }}', { project_id: projectId }, function(res) {
            (res.data || []).forEach(d => {
                $('#distributor_id').append(`<option value="${d.id}">${safe(d.distributor_name)}</option>`);
            });
        }).fail(function(xhr) {
            showError(xhr.responseJSON?.message || 'Failed to load distributors');
        });
    });

    $('#step2-form').on('submit', function(e) {
        e.preventDefault();
        clearError(); clearSuccess();

        if (!uploadToken) {
            showError('First upload design in Step 1.');
            return;
        }

        const fd = new FormData(this);
        fd.append('upload_token', uploadToken);

        $('#step2-btn').prop('disabled', true).text('Saving...');

        $.ajax({
            url: '{{ route('pdftool.context') }}',
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function(res) {
                sectionOptions = res.sections || [];
                const c = res.context || {};
                $('#context-box').html(`
                    <div class="alert alert-info mb-0">
                        <strong>Selected:</strong> ${safe(c.company)} / ${safe(c.zone)} / ${safe(c.unit)} / ${safe(c.project)} / ${safe(c.distributor)}
                    </div>
                `);
                $('#to-step-3').prop('disabled', false);
                showSuccess('Dynamic model context saved.');
            },
            error: function(xhr) {
                showError(xhr.responseJSON?.message || 'Context save failed');
            },
            complete: function() {
                $('#step2-btn').prop('disabled', false).text('Save Context');
            }
        });
    });

    $('#to-step-3').on('click', function() {
        if (sectionOptions.length === 0) {
            showError('Save context first.');
            return;
        }

        if ($('#mapping-table tbody tr').length === 0) {
            const s = Number(selectedRange.start_row || 1);
            const e = Number(selectedRange.end_row || s);
            const total = Math.max(e - s + 1, 1);
            const p1 = s + Math.max(Math.floor(total * 0.15), 1) - 1;
            const p2 = s + Math.max(Math.floor(total * 0.60), 2) - 1;
            addMappingRow(s, Math.min(p1, e), 'distributor');
            if (p1 + 1 <= e) {
                addMappingRow(p1 + 1, Math.min(p2, e), 'bookstock');
            }
            if (p2 + 1 <= e) {
                addMappingRow(p2 + 1, e, 'audit');
            }
        }
        gotoStep(3);
    });

    $('#add-map-row').on('click', function() {
        addMappingRow();
    });

    $(document).on('click', '.remove-map', function(e) {
        e.preventDefault();
        $(this).closest('tr').remove();
    });
    $(document).on('change', '.map-section', function() {
        toggleBookstockRowFields($(this).closest('tr'));
    });

    $('#step3-btn').on('click', function() {
        clearError(); clearSuccess();

        const mappings = collectMappings();
        if (mappings.length === 0) {
            showError('At least one mapping range is required.');
            return;
        }

        const fd = new FormData();
        fd.append('_token', '{{ csrf_token() }}');
        fd.append('upload_token', uploadToken);
        mappings.forEach((m, i) => {
            fd.append(`mappings[${i}][from_row]`, m.from_row);
            fd.append(`mappings[${i}][to_row]`, m.to_row);
            fd.append(`mappings[${i}][section]`, m.section);
            if (m.distributor_width) fd.append(`mappings[${i}][distributor_width]`, m.distributor_width);
            if (m.bookstock_title_row) fd.append(`mappings[${i}][bookstock_title_row]`, m.bookstock_title_row);
            if (m.bookstock_data_row) fd.append(`mappings[${i}][bookstock_data_row]`, m.bookstock_data_row);
        });
        const rulesJson = $('#rules_json').val().trim();
        if (rulesJson) {
            fd.append('rules_json', rulesJson);
        }

        $('#step3-btn').prop('disabled', true).text('Generating...');

        $.ajax({
            url: '{{ route('pdftool.map_preview') }}',
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function(res) {
                latestMappings = res.mappings || mappings;
                $('#mapped-preview').html(res.preview_html || '');
                $('#final-preview').html(res.preview_html || '');
                $('#to-step-4').prop('disabled', false);
                if (res.rule_report) {
                    $('#rules_report').text(JSON.stringify(res.rule_report, null, 2));
                }
                showSuccess('Mapped preview generated.');
            },
            error: function(xhr) {
                showError(xhr.responseJSON?.message || 'Mapping preview failed');
            },
            complete: function() {
                $('#step3-btn').prop('disabled', false).text('Generate Look Preview');
            }
        });
    });

    $('#to-step-4').on('click', function() {
        gotoStep(4);
    });

    $('#apply_rule_preset').on('click', function() {
        const key = $('#rule_preset').val();
        if (!key || !RULE_PRESETS[key]) {
            showError('Please select a preset.');
            return;
        }
        $('#rules_json').val(JSON.stringify(RULE_PRESETS[key], null, 2));
        clearError();
        showSuccess('Preset applied. Validate or generate preview.');
    });

    $('#clear_rules_btn').on('click', function() {
        $('#rules_json').val('');
        $('#rules_report').empty();
        clearError();
        showSuccess('Rules cleared.');
    });

    $('#validate_rules_btn').on('click', function() {
        clearError(); clearSuccess();
        const mappings = latestMappings.length ? latestMappings : collectMappings();
        if (mappings.length === 0) {
            showError('Please add mappings first.');
            return;
        }
        const fd = new FormData();
        fd.append('_token', '{{ csrf_token() }}');
        fd.append('upload_token', uploadToken);
        mappings.forEach((m, i) => {
            fd.append(`mappings[${i}][from_row]`, m.from_row);
            fd.append(`mappings[${i}][to_row]`, m.to_row);
            fd.append(`mappings[${i}][section]`, m.section);
            if (m.distributor_width) fd.append(`mappings[${i}][distributor_width]`, m.distributor_width);
            if (m.bookstock_title_row) fd.append(`mappings[${i}][bookstock_title_row]`, m.bookstock_title_row);
            if (m.bookstock_data_row) fd.append(`mappings[${i}][bookstock_data_row]`, m.bookstock_data_row);
        });
        const rulesJson = $('#rules_json').val().trim();
        if (rulesJson) {
            fd.append('rules_json', rulesJson);
        }

        $('#validate_rules_btn').prop('disabled', true).text('Validating...');
        $.ajax({
            url: '{{ route('pdftool.rule_validate') }}',
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.preview_html) {
                    $('#mapped-preview').html(res.preview_html);
                    $('#final-preview').html(res.preview_html);
                }
                $('#rules_report').text(JSON.stringify(res.rule_report || {}, null, 2));
                showSuccess(res.message || 'Rules valid');
            },
            error: function(xhr) {
                showError(xhr.responseJSON?.message || 'Rule validation failed');
            },
            complete: function() {
                $('#validate_rules_btn').prop('disabled', false).text('Validate Rules');
            }
        });
    });

    $('#step4-form').on('submit', function(e) {
        e.preventDefault();
        clearError(); clearSuccess();

        const templateName = $('#template_name').val();
        if (!templateName) {
            showError('Template name is required.');
            return;
        }

        const mappings = latestMappings.length ? latestMappings : collectMappings();
        if (mappings.length === 0) {
            showError('Please generate mapped preview first.');
            return;
        }

        const fd = new FormData();
        fd.append('_token', '{{ csrf_token() }}');
        fd.append('upload_token', uploadToken);
        fd.append('template_name', templateName);
        fd.append('confirm', '1');
        mappings.forEach((m, i) => {
            fd.append(`mappings[${i}][from_row]`, m.from_row);
            fd.append(`mappings[${i}][to_row]`, m.to_row);
            fd.append(`mappings[${i}][section]`, m.section);
            if (m.distributor_width) fd.append(`mappings[${i}][distributor_width]`, m.distributor_width);
            if (m.bookstock_title_row) fd.append(`mappings[${i}][bookstock_title_row]`, m.bookstock_title_row);
            if (m.bookstock_data_row) fd.append(`mappings[${i}][bookstock_data_row]`, m.bookstock_data_row);
        });
        const rulesJson = $('#rules_json').val().trim();
        if (rulesJson) {
            fd.append('rules_json', rulesJson);
        }

        $('#step4-btn').prop('disabled', true).text('Generating PDF...');

        $.ajax({
            url: '{{ route('pdftool.save') }}',
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            success: function(res) {
                showSuccess(`Template saved. <a href="${safe(res.pdf_url)}" target="_blank">Download/Open PDF</a>`);
            },
            error: function(xhr) {
                showError(xhr.responseJSON?.message || 'Final save failed');
            },
            complete: function() {
                $('#step4-btn').prop('disabled', false).text('Confirm and Generate PDF');
            }
        });
    });

    $('#back-1').on('click', function() { gotoStep(1); });
    $('#back-2').on('click', function() { gotoStep(2); });
    $('#back-3').on('click', function() { gotoStep(3); });
});
</script>