Subversion Repositories SmartDukaan

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <i class="icon_document_alt"></i>
                #if($template) Edit Template: $template.getBrand() - $template.getState()
                #else New WOD Template #end
            </h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><a href="javascript:void(0);" class="wod-template-admin">WOD Template Admin</a></li>
                <li>#if($template) Edit #else New #end Template</li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h4 style="margin:0;">Template Settings</h4></div>
                <div class="panel-body">
                    <input type="hidden" id="tplId" value="#if($template)$template.getId()#{else}0#end">
                    <div class="row">
                        <div class="col-md-3">
                            <label>Brand <span style="color:red;">*</span></label>
                            <input type="text" id="tplBrand" class="form-control"
                                   value="#if($template)$template.getBrand()#end" placeholder="e.g. Oppo, Vivo">
                        </div>
                        <div class="col-md-3">
                            <label>State/Region <span style="color:red;">*</span></label>
                            <input type="text" id="tplState" class="form-control"
                                   value="#if($template)$template.getState()#end" placeholder="e.g. UP East, Rajasthan">
                        </div>
                        <div class="col-md-4">
                            <label>Mail To (comma separated) <span style="color:red;">*</span></label>
                            <input type="text" id="tplMailTo" class="form-control"
                                   value="#if($template)$template.getMailTo()#end"
                                   placeholder="email1@domain.com,email2@domain.com">
                        </div>
                        <div class="col-md-2">
                            <label>Active</label>
                            <select id="tplActive" class="form-control">
                                <option value="true" #if(!$template || $template.isActive()) selected #end>Active
                                </option>
                                <option value="false" #if($template && !$template.isActive()) selected #end>Inactive
                                </option>
                            </select>
                        </div>
                        <div class="col-md-9" style="margin-top:10px;">
                            <label>Super Header Text (optional - shown above column headers in Excel/Email)</label>
                            <input type="text" id="tplSuperHeader" class="form-control"
                                   value="" placeholder="e.g. To be filled in / If Required for Open child Shop">
                        </div>
                        <div class="col-md-3" style="margin-top:10px;">
                            <label>Super Header BG Color</label>
                            <input type="color" id="tplSuperHeaderBg" value="#F0F0F0"
                                   style="width:60px;height:35px;padding:1px;vertical-align:middle;">
                            <span id="tplSuperHeaderBgLabel"
                                  style="margin-left:5px;font-size:12px;color:#666;">#F0F0F0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 style="margin:0;display:inline-block;">Column Configuration</h4>
                    <button class="btn btn-sm btn-success pull-right" id="addColumnBtn">
                        <i class="fa fa-plus"></i> Add Column
                    </button>
                </div>
                <div class="panel-body" style="overflow-x:auto;">
                    <table class="table table-bordered table-condensed" id="columnTable">
                        <thead>
                        <tr style="background:#f5f5f5;">
                            <th style="width:40px;">#</th>
                            <th style="width:120px;">Key</th>
                            <th style="width:150px;">Label</th>
                            <th style="width:90px;">Type</th>
                            <th style="width:200px;">Prefill Source</th>
                            <th style="width:120px;">Custom Default</th>
                            <th style="width:60px;">Required</th>
                            <th style="width:110px;">Condition</th>
                            <th style="width:50px;">Header BG</th>
                            <th style="width:50px;">Font Color</th>
                            <th style="width:80px;">Actions</th>
                        </tr>
                        </thead>
                        <tbody id="columnTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="margin-bottom:15px;">
        <div class="col-lg-12">
            <div class="panel panel-info">
                <div class="panel-heading"><h4 style="margin:0;">Header Preview</h4></div>
                <div class="panel-body" style="overflow-x:auto;">
                    <div id="previewSuperHeader"
                         style="font-weight:bold;font-size:14px;margin-bottom:8px;display:none;text-align:center;background:#f0f0f0;padding:6px;border:1px solid #ccc;"></div>
                    <table style="border-collapse:collapse;width:100%;" id="headerPreview">
                        <tr id="previewRow"></tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <button class="btn btn-success btn-lg" id="saveTemplateBtn">
                <i class="fa fa-save"></i> Save Template
            </button>
            <a href="javascript:void(0);" class="btn btn-default btn-lg wod-template-admin" style="margin-left:10px;">
                Cancel
            </a>
        </div>
    </div>
</section>

<script type="text/javascript">
    var prefillOptions = [
        {value: '', label: '(No Prefill)'},
        {value: 'CUSTOM', label: 'Custom Default Value'},
        {value: 'PartnerOnBoardingPanel.outLetName', label: 'Onboarding - Outlet Name'},
        {value: 'PartnerOnBoardingPanel.phoneNumber', label: 'Onboarding - Phone'},
        {value: 'PartnerOnBoardingPanel.address', label: 'Onboarding - Address'},
        {value: 'PartnerOnBoardingPanel.city', label: 'Onboarding - City'},
        {value: 'FofoStore.code', label: 'Store - SD Code'},
        {value: 'FofoStore.gstNumber', label: 'Store - GST Number'},
        {value: 'FofoStore.pan', label: 'Store - PAN'},
        {value: 'FofoKyc.email', label: 'KYC - Email'},
        {value: 'FofoKyc.state', label: 'KYC - State'},
        {value: 'FofoKyc.pincode', label: 'KYC - Pincode'},
        {value: 'FofoKyc.firstName', label: 'KYC - First Name'},
        {value: 'FofoKyc.lastName', label: 'KYC - Last Name'},
        {value: 'FofoKyc.mobile', label: 'KYC - Mobile'},
        {value: 'LoiForm.firstName', label: 'LOI - First Name'},
        {value: 'LoiForm.lastName', label: 'LOI - Last Name'},
        {value: 'LoiForm.mobile', label: 'LOI - Mobile'},
        {value: 'LoiForm.email', label: 'LOI - Email'},
        {value: 'LoiForm.panNo', label: 'LOI - PAN No'},
        {value: 'LoiForm.adharNo', label: 'LOI - Aadhaar No'},
        {value: 'LoiForm.gstNo', label: 'LOI - GST No'},
        {value: 'LoiForm.companyName', label: 'LOI - Company Name'},
        {value: 'LoiForm.gstPin', label: 'LOI - GST Pincode'},
        {value: 'LoiForm.gstState', label: 'LOI - GST State'},
        {value: 'LoiForm.gstDistrict', label: 'LOI - GST District'},
        {value: 'LoiForm.gstCity', label: 'LOI - GST City'},
        {value: 'LoiForm.storeArea', label: 'LOI - Store Area'},
        {value: 'PartnerDealerMapping.brandCode', label: 'Dealer - DMS/WOD Code'}
    ];

    var columnCounter = 0;

    function buildPrefillSelect(selected) {
        var html = '';
        prefillOptions.forEach(function (opt) {
            var sel = (opt.value === (selected || '')) ? 'selected' : '';
            html += '<option value="' + opt.value + '" ' + sel + '>' + opt.label + '</option>';
        });
        return html;
    }

    function addColumnRow(col) {
        columnCounter++;
        var c = col || {};
        var html = '<tr class="col-row" data-order="' + columnCounter + '">' +
                '<td class="col-order-num">' + columnCounter + '</td>' +
                '<td><input type="text" class="form-control input-sm col-key" value="' + (c.key || '') + '" placeholder="field_key"></td>' +
                '<td><input type="text" class="form-control input-sm col-label" value="' + (c.label || '') + '" placeholder="Display Label"></td>' +
                '<td><select class="form-control input-sm col-type">' +
                '<option value="text"' + (c.type === 'text' ? ' selected' : '') + '>Text</option>' +
                '<option value="textarea"' + (c.type === 'textarea' ? ' selected' : '') + '>Textarea</option>' +
                '<option value="file"' + (c.type === 'file' ? ' selected' : '') + '>File</option>' +
                '<option value="date"' + (c.type === 'date' ? ' selected' : '') + '>Date</option>' +
                '<option value="number"' + (c.type === 'number' ? ' selected' : '') + '>Number</option>' +
                '</select></td>' +
                '<td><select class="form-control input-sm col-prefill">' + buildPrefillSelect(c.default_value ? 'CUSTOM' : c.prefill_source) + '</select></td>' +
                '<td><input type="text" class="form-control input-sm col-custom-default" value="' + (c.default_value || '') + '" placeholder="Default value" style="' + (c.default_value ? '' : 'display:none;') + '"></td>' +
                '<td style="text-align:center;"><input type="checkbox" class="col-required"' + (c.required ? ' checked' : '') + '></td>' +
                '<td><select class="form-control input-sm col-condition">' +
                '<option value="always"' + ((c.condition || 'always') === 'always' ? ' selected' : '') + '>Always</option>' +
                '<option value="distributor"' + (c.condition === 'distributor' ? ' selected' : '') + '>Distributor Only</option>' +
                '<option value="non_distributor"' + (c.condition === 'non_distributor' ? ' selected' : '') + '>Non-Distributor Only</option>' +
                '</select></td>' +
                '<td><input type="color" class="col-header-bg" value="' + (c.header_bg || '#4472C4') + '" style="width:35px;height:30px;padding:1px;"></td>' +
                '<td><input type="color" class="col-header-font" value="' + (c.header_font_color || '#FFFFFF') + '" style="width:35px;height:30px;padding:1px;"></td>' +
                '<td>' +
                '<button class="btn btn-xs btn-default col-move-up" title="Move Up"><i class="fa fa-arrow-up"></i></button> ' +
                '<button class="btn btn-xs btn-default col-move-down" title="Move Down"><i class="fa fa-arrow-down"></i></button> ' +
                '<button class="btn btn-xs btn-danger col-remove" title="Remove"><i class="fa fa-times"></i></button>' +
                '</td>' +
                '</tr>';
        $('#columnTableBody').append(html);
        updatePreview();
    }

    function reorderNumbers() {
        var idx = 1;
        $('#columnTableBody .col-row').each(function () {
            $(this).find('.col-order-num').text(idx);
            $(this).attr('data-order', idx);
            idx++;
        });
    }

    function updatePreview() {
        // Super header
        var superText = $('#tplSuperHeader').val();
        var superBg = $('#tplSuperHeaderBg').val() || '#F0F0F0';
        if (superText && superText.trim()) {
            $('#previewSuperHeader').text(superText).css('background-color', superBg).show();
        } else {
            $('#previewSuperHeader').hide();
        }

        // Column headers
        var html = '';
        $('#columnTableBody .col-row').each(function () {
            var label = $(this).find('.col-label').val() || '(empty)';
            var bg = $(this).find('.col-header-bg').val();
            var fc = $(this).find('.col-header-font').val();
            var type = $(this).find('.col-type').val();
            if (type === 'file') return;
            html += '<td style="border:1px solid #ccc;padding:6px 10px;background-color:' + bg +
                    ';color:' + fc + ';font-weight:bold;font-size:12px;white-space:nowrap;text-align:center;">' + label + '</td>';
        });
        $('#previewRow').html(html);
    }

    function collectColumnsJson() {
        var columns = [];
        var order = 1;
        $('#columnTableBody .col-row').each(function () {
            var prefillVal = $(this).find('.col-prefill').val();
            var col = {
                key: $(this).find('.col-key').val().trim(),
                label: $(this).find('.col-label').val().trim(),
                type: $(this).find('.col-type').val(),
                prefill_source: (prefillVal === 'CUSTOM' ? null : prefillVal) || null,
                default_value: (prefillVal === 'CUSTOM') ? $(this).find('.col-custom-default').val().trim() : null,
                required: $(this).find('.col-required').is(':checked'),
                order: order++,
                condition: $(this).find('.col-condition').val(),
                header_bg: $(this).find('.col-header-bg').val(),
                header_font_color: $(this).find('.col-header-font').val()
            };
            if (col.key && col.label) {
                columns.push(col);
            }
        });
        return JSON.stringify(columns);
    }

    // Init: load existing data if editing
    $(document).ready(function () {
        #if($template)
            var existingConfig = $template.getColumnsConfig();
            if (existingConfig && existingConfig.length > 0) {
                existingConfig.forEach(function (col) {
                    addColumnRow(col);
                });
            }
            #if($template.getSuperHeader())
                $('#tplSuperHeader').val("$template.getSuperHeader().replace('"', '\"').replace("'", "\\'")");
            #end
            #if($template.getSuperHeaderBg())
                $('#tplSuperHeaderBg').val('$template.getSuperHeaderBg()');
                $('#tplSuperHeaderBgLabel').text('$template.getSuperHeaderBg()');
            #end
        #end
    });

    // Unbind previous handlers to prevent stacking on AJAX reload
    $(document).off('click.wodtpl');
    $(document).off('change.wodtpl input.wodtpl');

    // Add column
    $(document).on('click.wodtpl', '#addColumnBtn', function () {
        addColumnRow();
    });

    // Remove column
    $(document).on('click.wodtpl', '.col-remove', function () {
        $(this).closest('tr').remove();
        reorderNumbers();
        updatePreview();
    });

    // Move up
    $(document).on('click.wodtpl', '.col-move-up', function () {
        var row = $(this).closest('tr');
        var prev = row.prev('.col-row');
        if (prev.length) {
            row.insertBefore(prev);
            reorderNumbers();
            updatePreview();
        }
    });

    // Move down
    $(document).on('click.wodtpl', '.col-move-down', function () {
        var row = $(this).closest('tr');
        var next = row.next('.col-row');
        if (next.length) {
            row.insertAfter(next);
            reorderNumbers();
            updatePreview();
        }
    });

    // Show/hide custom default
    $(document).on('change.wodtpl', '.col-prefill', function () {
        var row = $(this).closest('tr');
        if ($(this).val() === 'CUSTOM') {
            row.find('.col-custom-default').show();
        } else {
            row.find('.col-custom-default').hide().val('');
        }
    });

    // Live preview on any change
    $(document).on('change.wodtpl input.wodtpl', '.col-label, .col-header-bg, .col-header-font, .col-type, #tplSuperHeader, #tplSuperHeaderBg', function () {
        updatePreview();
        $('#tplSuperHeaderBgLabel').text($('#tplSuperHeaderBg').val());
    });

    // Save
    $(document).on('click.wodtpl', '#saveTemplateBtn', function () {
        var brand = $('#tplBrand').val().trim();
        var state = $('#tplState').val().trim();
        var mailTo = $('#tplMailTo').val().trim();

        if (!brand || !state || !mailTo) {
            alert('Brand, State and Mail To are required.');
            return;
        }

        var columnsJson = collectColumnsJson();
        var parsed = JSON.parse(columnsJson);
        if (parsed.length === 0) {
            alert('Please add at least one column.');
            return;
        }

        $(this).prop('disabled', true).text('Saving...');

        $.ajax({
            url: context + '/wod-template/save',
            type: 'POST',
            data: {
                id: $('#tplId').val(),
                brand: brand,
                state: state,
                mailTo: mailTo,
                columnsConfig: columnsJson,
                superHeader: $('#tplSuperHeader').val().trim(),
                superHeaderBg: $('#tplSuperHeaderBg').val(),
                active: $('#tplActive').val()
            },
            success: function (resp) {
                var result = resp;
                try {
                    if (typeof resp === 'string') result = JSON.parse(resp);
                } catch (e) {
                }
                if (result && result.success) {
                    alert('Template saved successfully!');
                    doGetAjaxRequestHandler(context + '/wod-template-admin', function (response) {
                        $('#main-content').html(response);
                    });
                } else {
                    alert('Save failed.');
                    $('#saveTemplateBtn').prop('disabled', false).html('<i class="fa fa-save"></i> Save Template');
                }
            },
            error: function () {
                alert('Save failed. Server error.');
                $('#saveTemplateBtn').prop('disabled', false).html('<i class="fa fa-save"></i> Save Template');
            }
        });
    });
</script>