/**
 * @NApiVersion 2.x
 * @NScriptType Portlet
 * @NModuleScope SameAccount
 */


define(['N/record', 'N/search', 'N/log'], function(record, search, log) {

    function render(params) {
        var portlet = params.portlet;
        var baseUrl = 'https://4465021.app.netsuite.com';
        // Set the title of the portlet
        portlet.title = "Customer Details";
        var customerId = null;
        if (params.entity) {
            customerId = params.entity;
        }
        if (customerId) {
            var customerRecord = record.load({
                type: record.Type.CUSTOMER,
                id: customerId
            });
            var labelValue = customerRecord.getSublistValue({
                sublistId: 'addressbook',
                fieldId: 'label',
                line: 0
            });
            var addressRecord = customerRecord.getSublistSubrecord({
                sublistId: 'addressbook',
                fieldId: 'addressbookaddress',
                line: 0
            });
    
            var customerScore = customerRecord.getValue({fieldId: 'custentity_bbs_ytd_total'}); // assume a custom field 'custentity_score' exists
            
            // Extract details
            var customerName = customerRecord.getValue({fieldId: 'companyname'});
            var customerID = customerRecord.getText({fieldId: 'entityid'});
            var customerIdval = customerRecord.getValue({fieldId: 'entityid_val'});
            var customerEmail = customerRecord.getValue({fieldId: 'email'});
            var customerPhone = customerRecord.getValue({fieldId: 'phone'});
            var customerWeb = customerRecord.getValue({ fieldId: 'url' });
            var customerStatus = customerRecord.getText({fieldId: 'entitystatus'});
            var customerSalesRep = customerRecord.getText({fieldId: 'salesrep'});
            var css = '<style>.header{font-weight: bold; font-size:13px;}.gauge {position: relative;border-radius: 50%/100% 100% 0 0;background-color: var(--color, #a22);overflow: hidden;}.gauge:before{content: "";display: block;padding-top: 50%;}.gauge .chart {overflow: hidden;}.gauge .mask {position: absolute;left: 20%;right: 20%;bottom: 0;top: 40%;background-color: #fff;border-radius: 50%/100% 100% 0 0;}.gauge .percentage {position:  absolute;top: -1px;left: -1px;bottom: 0;right: -1px;background-color: var(--background, #aaa);transform:rotate(var(--rotation)); transform-origin: bottom center; transition-duration: 600;}.gauge:hover {--rotation: 100deg;}.gauge .value {position:absolute; bottom:0%; left:0;   width:100%; text-align: center;}.gauge .min {position:absolute;bottom:0;left:5%;}.gauge .max {position:absolute;bottom:0; right:5%;}';
            css += '.account-table{background-color:#EEE;box-shadow:2px 2px grey;padding:10px;border-radius:5px;}';
            css += '.tableTitle{font-size:14px;color:#000;}';
            css += '.actionButton{margin: 5px; padding: 5px; font-size: 22px; border: 1px solid #255599; line-height: 26px; text-align: center; background-color: #255599; color: white; border-radius: 5px;}';
            css += '.tileTitle{font-size:14px;color:#000;position:absolute;bottom:20px;right:5px;left:5px;text-align: center;}';
            css += '.tileTitleTable{font-size:14px;color:#000;text-align:left;}';
            css += '.tileValue{font-size:14px;color:#000;text-align: center;}';
            //css += '.ns-portlet-content .ns-portlet-column-container li {padding: unset;}';
            css += ".ns-dashboard-column[data-column-type='wide'] .ns-portlet-column-container[data-column-count='2'] .ns-portlet-column {width: 50%;padding:5px}";
            css += ".contactsHeader{font-weight: bold; font-size:1.5rem;background-color:#EEE;box-shadow:2px 2px grey;padding:10px;border-radius:5px;text-alighn: center;margin-top:5px;width:100%}";
            css += ".contactsBox{font-weight: bold; font-size:1rem;background-color:#EEE;box-shadow:2px 2px grey;padding:10px;border-radius:5px;text-alighn: center;margin-top:5px}";
            var customerOutput = '';
            var tickSVG =  '<svg height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-51.2 -51.2 614.40 614.40" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#A5EB78;" d="M427.534,73.084l-224.51,224.51c-6.051,6.051-15.863,6.051-21.914,0l-96.645-96.645L8.099,277.313 l145.785,145.785c10.127,10.127,23.862,15.816,38.183,15.816l0,0c14.32,0,28.057-5.69,38.182-15.816l273.65-273.65L427.534,73.084z"></path> <g style="opacity:0.1;"> <path d="M478.646,124.196L189.754,413.087c-7.993,7.992-18.043,13.442-28.902,15.872c9.066,6.425,19.956,9.955,31.215,9.955l0,0 c14.32,0,28.057-5.69,38.182-15.816l273.65-273.65L478.646,124.196z"></path> </g> <path d="M192.068,447.014c-16.587,0-32.182-6.459-43.912-18.189L2.372,283.04c-3.163-3.163-3.163-8.292,0-11.454l76.366-76.366 c3.164-3.163,8.292-3.163,11.455,0l28.668,28.667c3.163,3.163,3.163,8.292,0,11.454c-3.165,3.163-8.293,3.162-11.455,0l-22.94-22.94 l-64.911,64.911l140.058,140.058c8.669,8.669,20.195,13.443,32.456,13.443c12.26,0,23.785-4.775,32.456-13.443l186.951-186.952 c3.163-3.163,8.291-3.164,11.455,0c3.163,3.163,3.163,8.292,0,11.454L235.979,428.826 C224.248,440.555,208.653,447.014,192.068,447.014z"></path> <path d="M192.068,310.232c-6.303,0-12.228-2.454-16.684-6.911l-45.068-45.068c-3.163-3.163-3.163-8.292,0-11.454 c3.164-3.163,8.292-3.163,11.455,0l45.068,45.068c1.396,1.396,3.254,2.165,5.229,2.165s3.833-0.769,5.23-2.166L421.806,67.357 c3.164-3.163,8.292-3.163,11.455,0l76.366,76.366c1.518,1.518,2.372,3.579,2.372,5.727s-0.853,4.209-2.372,5.727l-63.787,63.787 c-3.164,3.163-8.292,3.162-11.455,0c-3.163-3.163-3.163-8.292,0-11.454l58.061-58.06l-64.91-64.91L208.752,303.321 C204.295,307.777,198.369,310.232,192.068,310.232z"></path> </g></svg>';
            var crossSVG = '<svg height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-51.2 -51.2 614.40 614.40" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#FF6465;" d="M380.688,256.001l116.299-116.299c8.72-8.72,8.72-22.859,0-31.579l-93.107-93.108 c-8.72-8.72-22.859-8.72-31.579,0l-116.3,116.299l-116.3-116.299c-8.72-8.72-22.859-8.72-31.579,0l-93.107,93.107 c-8.72,8.72-8.72,22.859,0,31.579l116.299,116.299L15.015,372.3c-8.72,8.72-8.72,22.859,0,31.579l93.108,93.107 c8.72,8.72,22.859,8.72,31.579,0l116.299-116.299L372.3,496.985c8.72,8.72,22.859,8.72,31.579,0l93.108-93.107 c8.72-8.72,8.72-22.859,0-31.579L380.688,256.001z"></path> <path d="M388.082,511.986c-7.887,0-15.777-3.003-21.781-9.008l-43.847-43.846c-3.309-3.309-3.309-8.675,0-11.983 c3.309-3.308,8.674-3.31,11.984,0l43.846,43.846c5.402,5.402,14.193,5.404,19.597,0l93.105-93.107 c2.618-2.617,4.06-6.097,4.06-9.798c0-3.701-1.441-7.18-4.058-9.798l-116.299-116.3c-3.309-3.309-3.309-8.675,0-11.983 L490.988,133.71c2.618-2.617,4.06-6.097,4.06-9.798s-1.441-7.18-4.058-9.798l-93.108-93.108c-2.618-2.618-6.097-4.058-9.799-4.058 c-3.7,0-7.18,1.441-9.797,4.058L261.986,137.305c-1.59,1.59-3.744,2.482-5.993,2.482s-4.402-0.893-5.993-2.482l-65.536-65.537 c-3.309-3.309-3.309-8.675,0-11.983c3.31-3.31,8.675-3.309,11.984,0l59.544,59.545L366.301,9.023C372.119,3.204,379.855,0,388.082,0 s15.964,3.204,21.781,9.022l93.108,93.108c5.818,5.818,9.022,13.554,9.022,21.781s-3.204,15.964-9.023,21.781L392.664,255.999 l110.307,110.307c5.818,5.818,9.022,13.554,9.022,21.781s-3.204,15.964-9.023,21.782l-93.105,93.107 C403.859,508.983,395.971,511.986,388.082,511.986z"></path> <path d="M123.905,512c-8.228,0-15.964-3.204-21.781-9.022L9.015,409.87c-12.01-12.01-12.01-31.552,0-43.564l110.308-110.307 L9.015,145.692c-12.009-12.01-12.009-31.552,0-43.564l93.108-93.107C107.941,3.204,115.677,0,123.905,0s15.964,3.204,21.781,9.022 l26.794,26.794c3.309,3.309,3.309,8.675,0,11.983c-3.31,3.309-8.675,3.309-11.984,0l-26.794-26.794 c-2.616-2.617-6.097-4.058-9.797-4.058c-3.701,0-7.18,1.441-9.799,4.058L21,114.112c-5.402,5.403-5.402,14.193,0,19.596 l116.3,116.299c1.589,1.589,2.481,3.744,2.481,5.992s-0.893,4.403-2.481,5.992L21,378.291c-5.403,5.403-5.403,14.193,0,19.596 l93.108,93.108c2.616,2.617,6.097,4.058,9.797,4.058c3.701,0,7.18-1.441,9.799-4.058l116.298-116.299 c1.59-1.59,3.744-2.482,5.993-2.482c2.248,0,4.402,0.893,5.993,2.482l48.485,48.485c3.309,3.309,3.309,8.675,0,11.983 c-3.31,3.309-8.675,3.309-11.984,0l-42.493-42.494L145.69,502.978C139.869,508.796,132.132,512,123.905,512z"></path> </g></svg>';
            var OverCredit = parseFloat(customerRecord.getValue({fieldId: 'custentity28'})) < 0 ? crossSVG : tickSVG;
            customerOutput += '<div class="account-table">';
                customerOutput += '<table class="gridview" width="100%">';
                customerOutput += '<tr>';
                customerOutput += '<th class="header" width="20%"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Type</span></span></th>';
                customerOutput += '<td class="data"><span class="gridview-cell-value">' + customerRecord.getValue({fieldId: 'stage'}) + '</span></td>';
                customerOutput += '<th class="header" width="20%"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Credit Limit</span></span></th>';
                value = '£' + formatNumberWithCommas(parseFloat(customerRecord.getValue({fieldId: 'creditlimit'})).toFixed(2));
                customerOutput += '<td class="data"><span class="gridview-cell-value">' + value + '</span></td>';
                customerOutput += '</tr>';
                customerOutput += '<tr>';
                customerOutput += '<th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Customer Name</span></span></th><td class="data"><span class="gridview-cell-value">' + customerName + '</span></td>';
                customerOutput += '<th class="header" width="20%"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Available Balance</span></span></th>';
                value = '£' + formatNumberWithCommas(parseFloat(customerRecord.getValue({fieldId: 'custentity28'})).toFixed(2));
                customerOutput += '<td class="data"><span class="gridview-cell-value">' + value + '</span></td>';
                customerOutput += '</tr>';
                customerOutput += '<tr>';
                customerOutput += '<th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Status</span></span></th><td class="data"><span class="gridview-cell-value">' + customerStatus + '</span></td>';
                customerOutput += '<th class="header" width="20%"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Credit Available</span></span></th>';
                customerOutput += '<td class="data"><span class="gridview-cell-value">' + OverCredit + '</span></td>';
                customerOutput += '</tr>';
                customerOutput += '<tr>';
                customerOutput += '<th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Sales Rep</span></span></th><td class="data"><span class="gridview-cell-value">' + customerSalesRep + '</span></td>';
                customerOutput += '<td class="data" colspan="2">';
                customerOutput += '<a href="'+ baseUrl + '/app/accounting/transactions/estimate.nl?whence=&entity=' + customerId + '" target="_blank" class=""><span class="actionButton">New Quote</span></a>';
                customerOutput += '<a href="'+ baseUrl + '/app/accounting/transactions/salesord.nl?whence=&entity=' + customerId + '" target="_blank" class=""><span class="actionButton">New Sales Order</span></a>';
                customerOutput += '<a href="'+ baseUrl + '/app/crm/calendar/task.nl?whence=&type=phonecall&company=' + customerId + '" target="_blank" class=""><span class="actionButton">New Phone Call</span></a>';
                        

                customerOutput += '</tr>';
               // customerOutput += '<br/>'; //<tr><th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Web Address</span></span></th><td class="data"><span class="gridview-cell-value">'+ customerRecord.getValue({fieldId: 'webAddress'}) + '</span></td><tr>';
                //customerOutput += '<br/>'; //'<tr><th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Default Order Priority</span></span></th><td class="data"><span class="gridview-cell-value">' + customerSalesRep + '</span></td><tr>';
                customerOutput += '<tr><th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Email</span></span></th><td class="data"><span class="gridview-cell-value"><a href="mailto:' + customerEmail + '">' + customerEmail + '</a></span></td><tr>';
                customerOutput += '<tr><th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Phone</span></span></th><td class="data"><span class="gridview-cell-value"><a href="tel:' + customerPhone + '">' +  customerPhone + '</a></span></td><tr>';
                customerOutput += '<tr><th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Web Site</span></span></th><td class="data"><span class="gridview-cell-value"><a href="' + customerWeb + '", target="_blank">' +  customerWeb + '</a></span></td><tr>';
                customerOutput += '<tr><th class="header"><span class="gridview-cell-value"><span class="" style="white-space: wrap;">Address </span></span></th><td class="data"><span class="gridview-cell-value">';
                
                customerOutput += addressRecord.getValue('addr1') + '<br>';
                customerOutput += addressRecord.getValue('addr2') + '<br>';
                customerOutput += addressRecord.getValue('city') + '<br>';
                customerOutput += addressRecord.getValue('state') + '<br>';
                customerOutput += addressRecord.getValue('zip') + '<br>';
                customerOutput += addressRecord.getValue('country') + '<br>';
                customerOutput += '</span></td></tr></table></div>';
            // Load the saved search for top items
            var topItemsSearch = search.load({
                id: 'customsearch1609',
            });
            var defaultFilters = topItemsSearch.filters;
            log.debug({ title: 'Default Filters', details: defaultFilters });
            defaultFilters.push(
                search.createFilter({
                    name: 'internalid',
                    join: 'customermain',
                    operator: search.Operator.ANYOF,
                    values: customerId
                })
            );
                /*var CompanyFilter = search.createFilter({
                    name: 'CN_Entity_INTERNALID',
                    operator: search.Operator.AnyOf,
                    values:customerId
                });
                defaultFilters.push(CompanyFilter);*/

            // Assign the updated filters back to the search object
            topItemsSearch.filters = defaultFilters;
           
            var topItemsResults = topItemsSearch.run().getRange({ start: 0, end: 3});
            var topItemsHtml = '<div class="contactsHeader"><p>Top 3 Sold Items (This Financial Year)</p></div>';
            topItemsHtml += '<div class="contactsBox"><table style="width:100%"><thead><tr><th>Item</th><th>Qty Sold</th><th>Unit</th></tr></thead><tbody>';
            topItemsResults.forEach(function(result) {
                var itemName = result.getText({ name: 'item', summary: search.Summary.GROUP }) || '';
                var qty = result.getValue({ name: 'quantityuom', summary: search.Summary.SUM }) || 0;
                var unit = result.getText({ name: 'unit', summary: search.Summary.GROUP }) || 0;
                topItemsHtml += '<tr><td>' + itemName + '</td><td>' + qty + '</td><td>' + unit + '</td></tr>';
            });
            topItemsHtml += '</tbody></table></div>';
            customerOutput += topItemsHtml;

            var contactSearch = search.create({
                type: search.Type.CONTACT,
                filters: [
                    ['company', 'anyOf', customerId],
                  'and',
                  ['custentity_es_is_ar_contact', 'is', false],
                  //esarcontact Exclude
                ],
                columns: ['internalid', 'firstname', 'lastname', 'email', 'phone', 'entityid' ]
            });
            
            var contactResults = contactSearch.run();
            var contacts = contactResults.getRange({
                start: 0,
                end: 100
            });
            contactsTable = '<div class="contactsHeader">';
            contactsTable += '<p>Contacts</p>';
            contactsTable += '</div>';
            
            contacts.forEach(function(contact) {
                contactsTable += '<div class="contactsBox">';
                contactsTable += '<table style="border-collapse: collapse;width:100%">';
                contactsTable += '<thead>';
                contactsTable += '<tr>';
                contactsTable += '<th class="header">Name</th>';
                contactsTable += '<th class="header">Contact</th>';
                contactsTable += '<th class="header">Last Call</th>';
                contactsTable += '</tr>';
                contactsTable += '</thead>';
                contactsTable += '<tbody>';
            
            if(contacts.length < 20){
                var ContactId = contact.getValue('internalid') ;
                var phoneCall='';
                var activitySearch = search.create({
                    type: search.Type.PHONE_CALL,
                    filters: [
                        ['contact', 'anyOf', ContactId],
                        'and',
                        ['title', 'isNot', 'AR Phone Call'],
                    ],
                    columns: [
                        'internalid',
                        'title',
                        'startdate',
                        'enddate',
                        search.createColumn({
                            name: 'lastModifiedDate',
                            sort: search.Sort.DESC
                        })
                    ]
                });
                
                var activityResults = activitySearch.run();
                var activities = activityResults.getRange({
                    start: 0,
                    end: 1
                });
                if (activities.length > 0) {
                    var lastActivity = activities[0];
                    phoneCall = lastActivity.getValue('title') + ' - ' + lastActivity.getValue('lastModifiedDate');
                } 
            } else {
                phoneCall = '';
            }
                contactsTable += '<tr>';
                envelopeSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 5.25L3 6V18L3.75 18.75H20.25L21 18V6L20.25 5.25H3.75ZM4.5 7.6955V17.25H19.5V7.69525L11.9999 14.5136L4.5 7.6955ZM18.3099 6.75H5.68986L11.9999 12.4864L18.3099 6.75Z" fill="#000"/></svg>'
                phoneSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 24 24" fill="none"><path d="M16.5562 12.9062L16.1007 13.359C16.1007 13.359 15.0181 14.4355 12.0631 11.4972C9.10812 8.55901 10.1907 7.48257 10.1907 7.48257L10.4775 7.19738C11.1841 6.49484 11.2507 5.36691 10.6342 4.54348L9.37326 2.85908C8.61028 1.83992 7.13596 1.70529 6.26145 2.57483L4.69185 4.13552C4.25823 4.56668 3.96765 5.12559 4.00289 5.74561C4.09304 7.33182 4.81071 10.7447 8.81536 14.7266C13.0621 18.9492 17.0468 19.117 18.6763 18.9651C19.1917 18.9171 19.6399 18.6546 20.0011 18.2954L21.4217 16.883C22.3806 15.9295 22.1102 14.2949 20.8833 13.628L18.9728 12.5894C18.1672 12.1515 17.1858 12.2801 16.5562 12.9062Z" fill="#000"/></svg>'
                //contactsTable += '<td>' +  ContactId + '</td>';
                var email = contact.getValue('email');
                contactsTable += '<td width="25%"><a href="' + baseUrl + '/app/common/entity/contact.nl?id=' + contact.getValue('internalid') + '" target="_blank">' + contact.getValue('entityid') + '</a></td>';
                contactsTable += '<td><a href="mailto:' + email + '">'+ envelopeSVG +'</a>  ';
                contactsTable += '<a href="tel:' + contact.getValue('phone') + '">' +  phoneSVG + '</a></td>';
                if (phoneCall && activities.length > 0) {
                    var phoneCallId = activities[0].getValue('internalid');
                    contactsTable += '<td width="60%"><a href="' + baseUrl + '/app/crm/calendar/call.nl?id=' + phoneCallId + '" target="_blank">' + phoneCall + '</a></td>';
                } else {
                    contactsTable += '<td width="60%">' + phoneCall + '</td>';
                }
                contactsTable += '</tr>';
                if(contacts.length < 20){
                    var contactQSearch = search.load({
                        id: 'customsearch1578',
                    });
                    defaultFilters = contactQSearch.filters;
                    var CompanyFilter = search.createFilter({
                        name: 'CUSTBODY31',
                        operator: search.Operator.IS,
                        values:ContactId
                    });
                    defaultFilters.push(CompanyFilter);
                    //We will copy the modified defaultFilters back into objSearch
                    
                    contactQSearch.filters = defaultFilters;
                    var contactQSearchResults = contactQSearch.run();
                        var quoteCount = contactQSearchResults.getRange({
                            start: 0,
                            end: 1000 // retrieve up to 10,000 results
                        }).length;
                        var quotes = contactQSearchResults.getRange({
                            start: 0,
                            end: 1
                        });
                        var lastQuote = '';
                        var quoteID = '';
                        var quoteNumber = '';
                        var quoteDate = '';
                        var quoteState = '';
                        if (quotes.length > 0) {
                            lastQuote = quotes[0];
                            quoteID = lastQuote.getValue('internalid');
                            quoteNumber = lastQuote.getValue('tranid');
                            quoteDate = lastQuote.getValue('trandate');
                            quoteState = lastQuote.getValue('entitystatus');
                        }
                    } else {
                    quoteCount = 0;
                    quoteNumber = '??';
                    quoteDate = '';
                }
               contactsTable += '<tr>';
               contactsTable += '<td><span class="header">Quotes: </span><a href="' + baseUrl + '/app/common/search/searchresults.nl?searchid=customsearch1578&ANT_Entity_INTERNALID=' + ContactId + '" target="_blank">' + quoteCount + '</a></td>';
               var link = quoteNumber !== '??' ? '<a href="' + baseUrl + '/app/accounting/transactions/estimate.nl?id=' + quoteID + '" target="_blank">' + quoteNumber + '</a>' : '??';
               contactsTable += '<td><span class="header">Last Quote No: </span> ' + link +'</td>';
               contactsTable += '<td><span class="header">Last Quote Date: </span>' + quoteDate + '</td>';
               contactsTable += '<td></td>';
               contactsTable += '</tr>';
               contactsTable += '</tbody>';
               contactsTable += '</table>';
               contactsTable += '</div>';
            });
               
            tileId = 'customsearch1428';
            tileName = 'Customer Dashboard Portlet - AHS All Monthly Sales Report - This Mth CFY';
            var savedSearchDataMTHCFY = getCardData(tileId, tileName, customerName);
            var mthcfy = 0;
            var mthlfy = 0;
            if (savedSearchDataMTHCFY.length > 0) {
                data = savedSearchDataMTHCFY[0];
                for (var i = 1; i < data.columns.length; i++) {
                    if(data.columns[i]['label'] == 'Net Sales'){
                        mthcfy = data.getValue(data.columns[i]);
                    }
                }
            } 
            
            tileId = 'customsearch1429';
            tileName = 'Customer Dashboard Portlet - AHS All Monthly Sales Report - Same Mth LFY';
            var savedSearchDataMTHLFY = getCardData(tileId, tileName, customerName);
            if (savedSearchDataMTHLFY.length > 0) {
                data = savedSearchDataMTHLFY[0];
                for (var i = 1; i < data.columns.length; i++) {
                    if(data.columns[i]['label'] == 'Net Sales'){
                        mthlfy = data.getValue(data.columns[i])
                    }
                }
            } 
            
            css += '</style>';
            output = css;
            output += '<div  class="ns-portlet-column-container" data-column-count="2">';
            
            output += '<ul class="ns-portlet-column">';
            //output += '<li>';
            //output += score;
            
            current = parseFloat(mthcfy);
            targetAmount = parseFloat(mthlfy);
            target = targetAmount + (targetAmount * 0.10);
            if(current > target){
                customerPer = (((current - target ) / target) * 100).toFixed(2);
                degrees = 180;
            } else {
                customerPer = ((current / target) * 100).toFixed(2);
                degrees = (180 * customerPer) / 100;
            }

            
            
            output += customerOutput;
            output += contactsTable;
        //    output += '</li>';
            output += '</ul>';
            output += '<ul class="ns-portlet-column">';
            output += '<div style="display:inline-block;margin-bottom:15px;">';
            output += '<div class="gauge" style="width: 200px; --rotation:' + degrees +  'deg; --color:#5cb85c; --background:#e9ecef;">';
                output += '<div class="percentage"></div>';
                output += '<div class="mask"></div>';
                output += '<span class="value">' + customerPer + '%</span>';
                output += '</div>';
            output += '<div style="text-align: center;font-weight: bold;">Month CFY vs LFY</div>';
            output += '</div>';
          //  output += '<li>';
                tileId = 'customsearch1428';
                tileName = 'This Mth CFY';
                tileId2 = 'customsearch1429';
                tileName2 = 'Same Mth LFY';
                output += formatTile2(tileId, tileName, savedSearchDataMTHCFY, tileId2, tileName2, savedSearchDataMTHLFY);
                
                
                tileId = 'customsearch1445';
                tileName = 'This Qtr CFY';
                savedSearchData = getCardData(tileId, tileName, customerName);
                tileId2 = 'customsearch1446';
                tileName2 = 'Same Qtr LFY';
                savedSearchData2 = getCardData(tileId2, tileName2, customerName);
                output += formatTile2(tileId, tileName, savedSearchData, tileId2, tileName2, savedSearchData2);
                
                tileId = 'customsearch1448';
                tileName = 'CFY';
                savedSearchData = getCardData(tileId, tileName, customerName);
                tileId2 = 'customsearch1447';
                tileName2 = 'LFY';
                savedSearchData2 = getCardData(tileId2, tileName2, customerName);
                output += formatTile2(tileId, tileName, savedSearchData, tileId2, tileName2, savedSearchData2);

            output += '<hr />';
            var width = (100 / 6) - 2;
            output += '<h2 class="ns-portlet-header-text">Quotes This Month</h2><div>';
            output += '<div style="width=100%">';
                wonValueCFY = getValue(getCardData('customsearch_cd_qwcfy_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#FFFAA0;">'
                output += '<h2 class="tileValue">' + wonValueCFY + '</h2>'
                output += '<span class="tileTitle">Won</span>'
                output += '</div>';
                wonValueLFY = getValue(getCardData('customsearch_cd_qwcfy_2_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#FFFAA0;">'
                output += '<h2 class="tileValue">' + wonValueLFY + '</h2>'
                output += '<span class="tileTitle">Won LFY</span>'
                output += '</div>';
                lostValueCFY = getValue(getCardData('customsearch_cd_qlcfy_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#FFFAA0;">'
                output += '<h2 class="tileValue">' + lostValueCFY + '</h2>'
                output += '<span class="tileTitle">Lost</span>'
                output += '</div>';
                lostValueLFY = getValue(getCardData('customsearch_cd_qlcfy_2_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2)+ '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#FFFAA0;">'
                output += '<h2 class="tileValue">' + lostValueLFY+ '</h2>'
                output += '<span class="tileTitle">Lost LFY</span>'
                output += '</div>';
                conversion = (parseFloat(wonValueCFY) / (parseFloat(lostValueCFY) + parseFloat(wonValueCFY))) * 100;
                conversion2 = isNaN(conversion) ? 0 : conversion.toFixed(2);
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#FFFAA0;">'
                output += '<h2 class="tileValue">' + conversion2  + '%'+ '</h2>'
                output += '<span class="tileTitle">Conversion CFY</span>'
                output += '</div>';
                totalLFY = (parseFloat(lostValueLFY) + parseFloat(wonValueLFY));
                conversion = (parseFloat(wonValueLFY) / totalLFY) * 100 ;
                conversion2 = isNaN(conversion) ? 0 : conversion.toFixed(2);
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#FFFAA0;">'
                output += '<h2 class="tileValue">' + conversion2  + '%'+ '</h2>'
                output += '<span class="tileTitle">Conversion LFY</span>'
                output += '</div>';
            output += '</div>';
            output += '<h2 class="ns-portlet-header-text">Quotes This Qtr</h2><div>';
            output += '<div style="width=100%">';
                wonValueCFY = getValue(getCardData('customsearch_cd_qwcfy_2_2_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ca7e6;">'
                output += '<h2 class="tileValue">' + wonValueCFY + '</h2>'
                output += '<span class="tileTitle">Won</span>'
                output += '</div>';
                wonValueLFY = getValue(getCardData('customsearch_cd_qwcfy_2_2_2_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ca7e6;">'
                output += '<h2 class="tileValue">' + wonValueLFY + '</h2>'
                output += '<span class="tileTitle">Won LFY</span>'
                output += '</div>';
                lostValueCFY = getValue(getCardData('customsearch_cd_qlcfy_3', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ca7e6;">'
                output += '<h2 class="tileValue">' + lostValueCFY + '</h2>'
                output += '<span class="tileTitle">Lost</span>'
                output += '</div>';
                lostValueLFY = getValue(getCardData('customsearch_cd_qlcfy_3_2', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2)+ '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ca7e6;">'
                output += '<h2 class="tileValue">' + lostValueLFY+ '</h2>'
                output += '<span class="tileTitle">Lost LFY</span>'
                output += '</div>';
                conversion = (parseFloat(wonValueCFY) / (parseFloat(lostValueCFY) + parseFloat(wonValueCFY))) * 100;
                
                conversion2 = isNaN(conversion) ? 0 : conversion.toFixed(2);
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ca7e6;">'
                output += '<h2 class="tileValue">' + conversion2  + '%'+ '</h2>'
                output += '<span class="tileTitle">Conversion CFY</span>'
                output += '</div>';
                totalLFY = (parseFloat(lostValueLFY) + parseFloat(wonValueLFY));
                conversion = (parseFloat(wonValueLFY) / totalLFY) * 100 ;
                
                conversion2 = isNaN(conversion) ? 0 : conversion.toFixed(2);
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ca7e6;">'
                output += '<h2 class="tileValue">' + conversion2  + '%'+ '</h2>'
                output += '<span class="tileTitle">Conversion LFY</span>'
                output += '</div>';
            output += '</div>';
            output += '<h2 class="ns-portlet-header-text">Quotes This Year</h2><div>';
            output += '<div style="width=100%">';
                wonValueCFY = getValue(getCardData('customsearch_cd_qwcfy', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ce6a7;">'
                output += '<h2 class="tileValue">' + wonValueCFY + '</h2>'
                output += '<span class="tileTitle">Won</span>'
                output += '</div>';
                wonValueLFY = getValue(getCardData('customsearch_cd_qwlfy', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ce6a7;">'
                output += '<h2 class="tileValue">' + wonValueLFY + '</h2>'
                output += '<span class="tileTitle">Won LFY</span>'
                output += '</div>';
                lostValueCFY = getValue(getCardData('customsearch_cd_qlcfy', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ce6a7;">'
                output += '<h2 class="tileValue">' + lostValueCFY + '</h2>'
                output += '<span class="tileTitle">Lost</span>'
                output += '</div>';
                lostValueLFY = getValue(getCardData('customsearch_cd_qllfy', '', customerName))
                output += '<div style="display:inline-table;width:' + width.toFixed(2)+ '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ce6a7;">'
                output += '<h2 class="tileValue">' + lostValueLFY+ '</h2>'
                output += '<span class="tileTitle">Lost LFY</span>'
                output += '</div>';
                conversion = (parseFloat(wonValueCFY) / (parseFloat(lostValueCFY) + parseFloat(wonValueCFY))) * 100;
                
                conversion2 = isNaN(conversion) ? 0 : conversion.toFixed(2);
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;margin-right:2%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ce6a7;">'
                output += '<h2 class="tileValue">' + conversion2  + '%'+ '</h2>'
                output += '<span class="tileTitle">Conversion CFY</span>'
                output += '</div>';
                totalLFY = (parseFloat(lostValueLFY) + parseFloat(wonValueLFY));
                conversion = (parseFloat(wonValueLFY) / totalLFY) * 100 ;
                
                conversion2 = isNaN(conversion) ? 0 : conversion.toFixed(2);
                output += '<div style="display:inline-table;width:' + width.toFixed(2) + '%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:#6ce6a7;">'
                output += '<h2 class="tileValue">' + conversion2  + '%'+ '</h2>'
                output += '<span class="tileTitle">Conversion LFY</span>'
                output += '</div>';
            output += '</div>';

         //   output += '</li>';
            output += '</ul>';
            output += '</div>';
            
            portlet.html = output;

        } else {
            // Handle the case where the customerId is not provided
            portlet.addField({
                id: 'customer_error',
                type: 'inlinehtml',
                label: 'Error'
            }).defaultValue = 'No customer ID provided.';
        }
    }

    function getValue(savedSearchData){
        value = 0;
        if (savedSearchData.length > 0) {
            data = savedSearchData[0];
            for (var i = 1; i < data.columns.length; i++) {
                lencss = i + 1 < data.columns.length ? '': 'width:20%;';
                value = data.getValue(data.columns[i]);
            }
        }
        return value;
    }


    function getGaugeColor(score) {
        if (score < 30) {
            return 'FF0000'; // red
        } else if (score < 60) {
            return 'FFFF00'; // yellow
        } else {
            return '00FF00'; // green
        }
    }



    function getCardData(tileId, tileName, customerName){
        var savedSearch = search.load({
            id: tileId,
        });
        defaultFilters = savedSearch.filters;
        var CompanyFilter = search.createFilter({
            name: 'CUSTCOL_2663_COMPANYNAME',
            operator: search.Operator.CONTAINS,
            values:customerName
        });
        defaultFilters.push(CompanyFilter);
        //We will copy the modified defaultFilters back into objSearch
        
        savedSearch.filters = defaultFilters;
        
        
        var savedSearchResults = savedSearch.run();
        var savedSearchData = savedSearchResults.getRange({
            start: 0,
            end:1
        });
        columns = savedSearch.columns;
        return savedSearchData; 
    }
    function formatNumberWithCommas(number) {
        var parts = number.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }
    function formatTile(tileId, tileName, savedSearchData){
        var kpi = '<div style="margin-bottom:10px;">';
        var Colour = '#6ce6a7';
        if (tileName.indexOf('Mth') > 0){
            Colour = '#FFFAA0' 
        } else if (tileName.indexOf('Qtr') > 0){
            Colour = '#6ca7e6';
        };
        if (savedSearchData.length > 0) {
            data = savedSearchData[0];
            
            for (var i = 1; i < data.columns.length; i++) {
                lencss = i + 1 < data.columns.length ? '': 'width:20%;';
                label = data.columns[i].label;
                value = data.getValue(data.columns[i]);
                if (value.indexOf('%') === -1){
                    value = '£' + formatNumberWithCommas(parseFloat(value).toFixed(2));
                } else {
                    value = parseFloat(value).toFixed(2) + '%';
                }
                kpi += '<div style="display:inline-table;width:24%;margin-right:1.5%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
                kpi += '<h2 class="tileValue">' + value + '</h2>'
                kpi += '<span class="tileTitle">' + label  + '</span>'
                kpi += '</div>';
            }
            kpi += '<div style="display:inline-table;width:23%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
            kpi += '<h2 class="tileValue">&nbsp;</h2>'
            kpi += '<span class="tileTitle"><strong>' + tileName  + '</strong></span>'
            kpi += '</div>';
            
        } else {
                kpi += '<div style="display:inline-table;width:24%;margin-right:1.5%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
                kpi += '<h2 class="tileValue">£0.00</h2>'
                kpi += '<span class="tileTitle">Net Sales</span>'
                kpi += '</div>';
                kpi += '<div style="display:inline-table;width:24%;margin-right:1.5%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
                kpi += '<h2 class="tileValue">£0.00</h2>'
                kpi += '<span class="tileTitle">Gross Profit</span>'
                kpi += '</div>';
                kpi += '<div style="display:inline-table;width:24%;margin-right:1.5%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
                kpi += '<h2 class="tileValue">0.00%</h2>'
                kpi += '<span class="tileTitle">GPP</span>'
                kpi += '</div>';
                kpi += '<div style="display:inline-table;width:23%;position:relative;padding:15px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
                kpi += '<h2 class="tileValue">&nbsp;</h2>'
                kpi += '<span class="tileTitle">' + tileName  + '</span>'
                kpi += '</div>';
            
        }
        kpi += '</div>';
        return kpi;
    }
    function formatTile2(tileId, tileName, savedSearchData, tileId2, tileName2, savedSearchData2){
        
        var moneybagSVG = '<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" stroke-width="3" stroke="#000" fill="none"><path d="M49.19,57.34H14.81L16,35.91A15.46,15.46,0,0,1,31.44,21.3h1.83A14.71,14.71,0,0,1,48,35.2Z"/><path d="M27.38,21.84,19.72,7.39a.5.5,0,0,1,.52-.73l4.65.77a46,46,0,0,0,14.76.05l5.11-.81a.5.5,0,0,1,.51.75L36.85,21.53"/><line x1="28.23" y1="13.15" x2="30.73" y2="21.3" stroke-linecap="round"/><line x1="35.14" y1="14.79" x2="33.79" y2="21.31" stroke-linecap="round"/><path d="M38.34,50.12H26.12a.1.1,0,0,1-.07-.16c.83-.9,4.83-5.47,3.3-9.59-1.7-4.59-.6-11.88,7.64-8.49" stroke-linecap="round"/><line x1="24.19" y1="40.49" x2="35.59" y2="40.49" stroke-linecap="round"/></svg>'
        var upSVG = '<svg width="64px" height="64px" viewBox="-9.1 -9.1 109.20 109.20" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" transform="rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#353535;} </style> <g> <path class="st0" d="M13.8,41.3c9.5-5.6,17.5-12.1,24.5-19.9c-0.2,7.7-0.5,15.5-0.6,23.2c-0.1,6.9-0.2,13.9-0.3,20.8 c-0.1,5.7-1.2,11.8-0.5,17.5c0.7,6.8,12.1,9.9,13.2,1.8c1.7-12.5-0.3-26.4-0.5-39c-0.1-6.6-0.4-13.2-0.6-19.8 c1.3,1.1,2.6,2.1,3.8,3c7.6,5.6,15.8,9.4,24.9,11.6c3.3,0.8,5-3.5,2.3-5.4C73.8,31,67.2,26.9,61.6,22c-2.9-2.5-5.5-5.3-7.7-8.5 c-2.1-3.2-3.3-7-5.6-10.1c-3.2-4.3-9-2.9-10.1,2c-7.4,11.4-16.5,24.1-27,32.5C9.4,39.5,11.8,42.4,13.8,41.3z"></path> </g> </g></svg>'
        var downSVG = '<svg width="64px" height="64px" viewBox="-9.1 -9.1 109.20 109.20" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#353535;} </style> <g> <path class="st0" d="M13.8,41.3c9.5-5.6,17.5-12.1,24.5-19.9c-0.2,7.7-0.5,15.5-0.6,23.2c-0.1,6.9-0.2,13.9-0.3,20.8 c-0.1,5.7-1.2,11.8-0.5,17.5c0.7,6.8,12.1,9.9,13.2,1.8c1.7-12.5-0.3-26.4-0.5-39c-0.1-6.6-0.4-13.2-0.6-19.8 c1.3,1.1,2.6,2.1,3.8,3c7.6,5.6,15.8,9.4,24.9,11.6c3.3,0.8,5-3.5,2.3-5.4C73.8,31,67.2,26.9,61.6,22c-2.9-2.5-5.5-5.3-7.7-8.5 c-2.1-3.2-3.3-7-5.6-10.1c-3.2-4.3-9-2.9-10.1,2c-7.4,11.4-16.5,24.1-27,32.5C9.4,39.5,11.8,42.4,13.8,41.3z"></path> </g> </g></svg>'
        var kpi = '<div style="margin-bottom:10px;">';
        var Colour = '#6ce6a7';
        if (tileName.indexOf('Mth') > 0){
            Colour = '#FFFAA0' 
        } else if (tileName.indexOf('Qtr') > 0){
            Colour = '#6ca7e6';
        };
        for (var i = 1; i < 4; i++) {
            lencss = i + 1 < 4 ? '': 'width:20%;';
            value = '0.00';
            value2 = '0.00';
            if(i == 1){
                label = 'Net Sales';
            } else if(i == 2){
                label = 'Gross Profit';
            } else if(i == 3){
                label = 'Gross Profit %';
            } else {
                label = '';
            }
            if(savedSearchData.length > 0){
                data = savedSearchData[0];
                label = data.columns[i].label;
                value = data.getValue(data.columns[i]);
            }
            if ( savedSearchData2.length > 0){
                data2 = savedSearchData2[0];
                label = data2.columns[i].label;
                value2 = data2.getValue(data2.columns[i]);
            }
            var img = parseFloat(value) > parseFloat(value2) ? upSVG : downSVG;
            if (value.indexOf('%') === -1){
                value = '£' + formatNumberWithCommas(parseFloat(value).toFixed(2));
            } else {
                value = parseFloat(value).toFixed(2) + '%';
            }
            if (value2.indexOf('%') === -1){
                value2 = '£' + formatNumberWithCommas(parseFloat(value2).toFixed(2));
            } else {
                value2 = parseFloat(value2).toFixed(2) + '%';
            }
            kpi += '<div style="display:inline-table;width:31.5%;margin-right:1.5%;position:relative;padding:5px;height:120px;box-shadow: 2px 2px grey;border-radius:5px;background-color:' + Colour +';">'
            kpi += '<table style="width:100%; height:100%;">';
                kpi += '<tr>';
                    kpi += '<td class="tileTitleTable">'  +  tileName +  '</td>';
                    kpi += '<td class="tileValue" text-alighn="right">'  +  value +  '</td>';
                    kpi += '<td rowspan="2" width="10%" style="vertical-align:top;text-align:right">';
                        kpi += img;
                    kpi += '</td>';
                kpi += '</tr>';
                kpi += '<tr>';
                    kpi += '<td class="tileTitleTable">' +  tileName2  + '</td>';
                    kpi += '<td class="tileValue" text-alighn="right">' +  value2  + '</td>';
                kpi += '</tr>';
                kpi += '<tr>';
                    kpi += '<td colspan="3" align="center"class="tableTitle">' + label  + '</td>';
                kpi += '</tr>';
            kpi += '</table>';
            kpi += '</div>';
        }
        kpi += '</div>';
        return kpi;
    }

    return {
        render: render
    };
});