if ( typeof Vue !== 'undefined' ) {

    /**
     * search component mixin
     * this is a template for all search components
     */
    const searchComponentMixin = {
        props: {
            id: {
                default: null
            },
            // provided
            title: {
                default: ''
            },
            // provided
            code: {
                default: ''
            },
            entityTwoIdFieldName: {
                default: ''
            },
            entityThreeIdFieldName: {
                default: ''
            },
            entityFourIdFieldName: {
                default: ''
            },
            labelText: {
                default: 'Search'
            },
            maxResults: {
                default: 100
            },
            // provided
            required: {
                default: false
            },
            disabled: {
                default: false
            },
            readOnly: {
                default: false
            },
            showLabel: {
                default: true
            },
            classes: '',
            // provided
            showInputErrorOnZeroId: {
                default: false
            },
            clearTextOnSelect: {
                default: false
            },
            inputMode:{
                default: 'text'
            }
        },
        data: function() {
            return {
                cachedEntity: null,
                entityId: this.id,
                entityTwoId: null,
                entityThreeId: null,
                entityFourId: null,
                entityCode: this.code,
                list: {
                    term: this.title,
                    items: [],
                    loading: false,
                    selected: {},
                    opened: false,
                    position: {
                        top: 0,
                        left: 0
                    }
                },
                // object for holding request data
                request: {
                    xhr: null
                }
            }
        },
        watch: {
            id: function( val ) {
                this.entityId = val;
            },
            code: function( val ) {
                this.entityCode = val;
            },
            title: function( val ) {
                this.list.term = val;
            }
        },
        methods: {
            getEmittedEventName: function() {
                return 'entity-select';
            },
            getSearchUrl: function() {

            },
            getItemKey: function( item ) {
                return JSON.stringify( item );
            },
            getDisplayTitle: function( item ) {
                return this.getTitle( item );
            },
            getTitle: function( item ) {
                if ( typeof item.code !== 'undefined' ) {
                    return `${item.title} (${item.code})`;
                }

                return item.title;
            },
            getTitleHtml: function( item ) {
                let term = this.list.term;
                let reg = new RegExp( term, 'gi' );
                return this.getDisplayTitle( item ).replace( reg, '<span class="bg-warning">$&</span>' );
            },
            onKeyup: async function( $event ) {
                // if escape key, close the list
                if ( $event.keyCode === 27 ) {
                    this.closeList();
                } else {
                    // else get and show suggestions
                    await this.showSuggestions();
                }
            },
            getSearchResults: function() {
                let self = this;
                // abort previous request
                if ( null !== this.request.xhr ) {
                    this.request.xhr.abort();
                }
                // send new request
                this.request.xhr = $.get( this.getSearchUrl(), function( data ) {
                    self.list.items.push( ...data.slice( 0, self.maxResults ) );
                    self.loading = false;
                });
            },
            showSuggestions: async function() {
                if ( this.list.term !== '' ) {
                    this.loading = true;
                    this.list.items = [];
                    this.openList();
                    this.getSearchResults();

                } else {
                    this.entityId = null;
                    this.entityCode = null;
                    this.closeList();
                    this.$emit( this.getEmittedEventName() + '-cleared' );
                }
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityCode = item.code;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
                // if clear
                if ( this.clearTextOnSelect ) {
                    this.list.term = '';
                }
            },
            positionList: function() {
                this.list.position.top = $( this.$el ).height() + 'px';
            },
            openList: function() {
                this.list.opened = true;
            },
            closeList: function() {
                this.list.opened = false;
                this.list.items = [];
            },
            handleNoResults: function() {
                this.entityId = null;
                this.closeList();
            },
            handleClearSearchData: function() {
                this.list.term = '';
                this.entityId = null;
                this.entityCode = null;
                this.cachedEntity = null;
            },
            getSortedItems: function() {
                const sortedList = [...this.list.items];
                return sortedList.sort( ( a, b ) => {
                    const $this = this;
                    const aScore = window.ctp.utils.getSimilarityScore( $this.getDisplayTitle( a ), $this.list.term );
                    const bScore = window.ctp.utils.getSimilarityScore( $this.getDisplayTitle( b ), $this.list.term );
                    return bScore - aScore;
                });
            },
            getInputProgressionEventName: function (){
                return 'input-in-progress'
            }
        },
        template: `
            <div v-bind:class="['uind-autocomplete-container flex-grow-1', classes]">
                <input type="hidden" v-bind:name="idFieldName" v-model="entityId">
                <input type="hidden" v-bind:name="entityTwoIdFieldName" v-model="entityTwoId" v-if="entityTwoIdFieldName != ''">
                <input type="hidden" v-bind:name="entityThreeIdFieldName" v-model="entityThreeId" v-if="entityThreeIdFieldName != ''">
                <input type="hidden" v-bind:name="entityFourIdFieldName" v-model="entityFourId" v-if="entityFourIdFieldName != ''">
                <input type="hidden" v-bind:name="codeFieldName" v-model="entityCode">
                <label v-if="showLabel">{{ labelText }}</label>
                <input type="text" class="form-control"
                        v-bind:name="titleFieldName"
                        v-model="list.term"
                        v-on:keyup="onKeyup( $event ); $emit(getInputProgressionEventName())"
                        v-bind:required="required"
                        v-bind:disabled="disabled"
                        v-bind:readonly="readOnly"
                        v-bind:inputmode="inputMode"
                        v-bind:class="{ 'is-invalid': ( showInputErrorOnZeroId && ( entityId === 0 || entityId == null ) ) }"
                        autocomplete="off">
                <!-- autocomplete list -->
                <div class="uind-autocomplete-list" v-if="list.opened" v-bind:style="list.position">
                    <a href="#" v-for="(item, index) in getSortedItems()" 
                                v-if="list.items.length > 0 && ! loading" 
                                v-bind:key="getItemKey(item)" 
                                v-bind:child="item" 
                                v-bind:index="index" 
                                v-html="getTitleHtml(item)"
                                v-on:click="setEntity(item, $event); $emit(getEmittedEventName(), item.id, item);"></a>
                    <li v-if="list.items.length == 0 && ! loading" v-on:click="handleNoResults">No results found</li>
                    <li v-if="loading" class="text-center"><div class="spinner-border text-secondary spinner-border-sm"></div></li>
                </div>
            </div>
        `,
        mounted: function() {
            // set list position
            this.positionList();
            // listen for clear data
            this.$parent.$on( 'clear-search-data', this.handleClearSearchData );
        }
    };

    /*
   * warehouse supplies item search
   * */
    Vue.component( 'warehouse-supplies-item-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/warehouse-supplies/search-items?search=${encodeURIComponent( this.list.term )}`
            },
            getEmittedEventName: function() {
                return 'item-select';
            },
            getTitle: function( item ) {
                return item.sku;
            }
        },
        props: {
            labelText: {
                default: 'Search Item'
            },
            titleFieldName: {
                default: 'sku'
            },
            codeFieldName:{
                default: 'sku'
            },
            idFieldName:{
                default: 'sku'
            }

        }
    });


    /*
   * vehicle search
   * */
    Vue.component( 'vehicle-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/vehicle-request/vehicle-search?term=${encodeURIComponent( this.list.term )}`
                if(this.formType===null && this.fleetType===null){
                    return url
                } else if(this.formType!==null && this.fleetType===null){
                    url+= `&formType=${this.formType}`
                    return url
                } else if(this.fleetType!==null && this.formType===null){
                    url+= `&fleetType=${this.fleetType}`
                    return url
                } else {
                    url+= `&formType=${this.formType}&fleetType=${this.fleetType}`
                    return url
                }
            },
            getEmittedEventName: function() {
                return 'vehicle-select';
            },
            getTitle: function( vehicle ) {
                return vehicle.model + ' (' + vehicle.registrationNumber + ')';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityCode = item.registrationNumber;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
                // if clear
                if ( this.clearTextOnSelect ) {
                    this.list.term = '';
                }
            }
        },
        props: {
            labelText: {
                default: 'Search Vehicle'
            },
            titleFieldName: {
                default: 'vehicleRegistrationNumber'
            },
            idFieldName: {
                default: 'vehicleId'
            },
            formType: {
              default: null
            },
            fleetType: {
              default: null
            },
            codeFieldName: {
                default: 'vehicleCode'
            },
        }
    });

    /*
   * vehicle search
   * */
    Vue.component( 'physical-compensation-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/physical-compensations/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'vehicle-select';
            },
            getTitle: function( vehicle ) {
                return vehicle.model + ' (' + vehicle.registrationNumber + ')';
            },
            setEntity: function ( vehicle, event ) {
                event.preventDefault();
                this.entityCode = vehicle.registrationNumber;
                this.list.term = this.getTitle( vehicle );
                this.closeList();
            }
        },
        props: {
            labelText: {
                default: 'Search Vehicle'
            },
            titleFieldName: {
                default: 'vehicleModel'
            },
            codeFieldName: {
                default: 'vehicleRegistrationNumber'
            },
        }
    });

    /**
     * supplier search component
     */

    Vue.component( 'employee-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/hrms/employees/search?term=${encodeURIComponent( this.list.term )}`;
                if ( this.departmentIds != null && this.departmentIds.length > 0 ) {
                    if( Array.isArray(this.departmentIds) ) {
                        url += `&department-ids=${this.departmentIds.join( ',' )}`;
                    } else if( typeof this.departmentIds === 'string' && !this.departmentIds.includes(',') ){
                        url += `&department-ids=${this.departmentIds.substring(1,this.departmentIds.length-1)}`;
                    }
                }
                if ( this.functionIds != null && this.functionIds.length > 0 ) {
                    url += `&function-ids=${this.functionIds.join( ',' )}`;
                }
                if ( this.ids != null && this.ids.length > 0 ) {
                    url += `&employee-ids=${this.ids.join( ',' )}`;
                }
                if ( this.isActive != null ) {
                    url += `&is-active=${this.isActive}`;
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'employee-select';
            },
            getTitle: function( item ) {
                if ( !! item.serialNumber ) {
                    let title = `${item.fullName} (${item.serialNumber})`;
                    if( this.isPositionVisible && !! item.positionTitle ){
                        title += ` (${item.positionTitle}) `
                    }
                    if ( !! item.officialEmail ) {
                        title += ` / ${item.officialEmail}`
                    }
                    return title;
                }
                return item.fullName;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityCode = item.username;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
                // if clear
                if ( this.clearTextOnSelect ) {
                    this.list.term = '';
                }
            },
        },
        props: {
            // provided
            labelText: {
                default: 'Search Employee'
            },
            // provided
            titleFieldName: {
                default: 'employeeTitle'
            },
            idFieldName: {
                default: 'employeeId'
            },
            // provided
            codeFieldName: {
                default: 'employeeCode'
            },
            departmentIds: {
                default: null
            },
            functionIds: {
                default: null
            },
            ids: {
                default: null
            },
            isActive: {
                default: null
            },
            isPositionVisible : {
                default : false
            },
        },
    });


    /**
     * financing purchase order search component
     */
    Vue.component( 'financing-po-search-component', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/banking/financing/purchase-orders/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'financing-po-select';
            },
            getTitle: function( po ) {
                return po.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Financing PO'
            },
            titleFieldName: {
                default: 'financingPoTitle'
            },
            idFieldName: {
                default: 'financingPoId'
            },
            codeFieldName: {
                default: 'financingPoCode'
            }
        }
    } )


    /**
     * purchase order search component
     */
    Vue.component( 'purchase-order-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/ctp/rest/purchase-orders/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'purchase-order-select';
            },
            getTitle: function( po ) {
                return po.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Purchase Order'
            },
            titleFieldName: {
                default: 'purchaseOrderTitle'
            },
            idFieldName: {
                default: 'purchaseOrderId'
            },
            codeFieldName: {
                default: 'purchaseOrderCode'
            }
        }
    });

    /**
     * approved purchase order search component
     */
    Vue.component( 'approved-purchase-order-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/purchase-orders/search-approved?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'purchase-order-select';
            },
            getTitle: function( po ) {
                return po.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Approved Purchase Order'
            },
            titleFieldName: {
                default: 'purchaseOrderTitle'
            },
            idFieldName: {
                default: 'purchaseOrderId'
            },
            codeFieldName: {
                default: 'purchaseOrderCode'
            }
        }
    });


    Vue.component( 'import-clearing-bill-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function () {
                return `/uind/accounts-finance/support-queries/import-clearing-bill/search?term=${encodeURIComponent(this.list.term)}`;
            },
            getEmittedEventName: function (){
                return 'import-bill-select';
            },
            getTitle: function (bill){
                return bill.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Bill code'
            },
            titleFieldName: {
                default: 'billTitle'
            },
            idFieldName: {
                default: 'billId'
            },
            codeFieldName: {
                default: 'billCode'
            }
        }
    })

    Vue.component( 'export-clearing-bill-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function () {
                return `/uind/accounts-finance/support-queries/export-clearing-bill/search?term=${encodeURIComponent(this.list.term)}`;
            },
            getEmittedEventName: function (){
                return 'export-bill-select';
            },
            getTitle: function (bill){
                return bill.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Bill code'
            },
            titleFieldName: {
                default: 'billTitle'
            },
            idFieldName: {
                default: 'billId'
            },
            codeFieldName: {
                default: 'billCode'
            }
        }
    })

    Vue.component('grn-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function () {
                return `/uind/accounts-finance/support-queries/grn/search?term=${encodeURIComponent(this.list.term)}`;
            },
            getEmittedEventName: function () {
                return 'grn-select';
            },
            getTitle: function (grn) {
                return grn.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Grn code'
            },
            titleFieldName: {
                default: 'grnTitle'
            },
            idFieldName: {
                default: 'grnId'
            },
            codeFieldName: {
                default: 'grnCode'
            }
        }
    })

    Vue.component( 'bill-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/accounts-finance/support-queries/bill/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'bill-select';
            },
            getTitle: function( bill ) {
                return bill.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Bill code'
            },
            titleFieldName: {
                default: 'billTitle'
            },
            idFieldName: {
                default: 'billId'
            },
            codeFieldName: {
                default: 'billCode'
            }
        }
    });

    Vue.component( 'voucher-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/accounts-finance/support-queries/voucher/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'voucher-select';
            },
            getTitle: function( voucher ) {
                return voucher.voucherCode;
            }
        },
        props: {
            labelText: {
                default: 'Search Voucher code'
            },
            titleFieldName: {
                default: 'voucherTitle'
            },
            idFieldName: {
                default: 'voucherId'
            },
            codeFieldName: {
                default: 'voucherCode'
            }
        }
    });

    /**
     * bill of lading search component
     */
    Vue.component( 'bill-of-lading-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/bol-customs/search?term=${encodeURIComponent( this.list.term )}&supplier-id=${encodeURIComponent( this.supplierId )}&invoice-date=${encodeURIComponent( this.invoiceDate )}`;
            },
            getEmittedEventName: function() {
                return 'bill-of-lading-select';
            },
            getTitle: function( bol ) {
                return bol.billOfLadding;
            }
        },
        props: {
            labelText: {
                default: 'Search BOL'
            },
            titleFieldName: {
                default: 'billOfLadingTitle'
            },
            idFieldName: {
                default: 'billOfLadingId'
            },
            codeFieldName: {
                default: ''
            },
            supplierId: {
                default: 0
            },
            invoiceDate: {
                default: ''
            }
        }
    });

    /**
     * supplier search component
     */
    Vue.component( 'supplier-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/suppliers/search?term=${encodeURIComponent( this.list.term )}`;
                if ( !! this.categoryId ) {
                    url += `&category-id=${this.categoryId}`;
                }
                if( !! this.purchaseOrderType ){
                    url += `&purchase-order-type=${this.purchaseOrderType}`;
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'supplier-select';
            },
            getTitle: function (supplier) {
                return supplier.title;
            }
        },
        props: {
            labelText: {
                default: 'Search Supplier'
            },
            titleFieldName: {
                default: 'supplierTitle'
            },
            idFieldName: {
                default: 'supplierId'
            },
            codeFieldName: {
                default: 'supplierCode'
            },
            categoryId: {
                default: null
            },
            purchaseOrderType : {
                default : null
            }
        }
    });

    /**
     * supplier title category search component
     */
    Vue.component( 'supplier-title-category-search', {
        mixins: [searchComponentMixin],
        props: {
            labelText: {
                default: 'Search Supplier'
            },
            titleFieldName: {
                default: 'supplierTitle'
            },
            idFieldName: {
                default: 'supplierId'
            },
            codeFieldName: {
                default: 'supplierCode'
            },
            categoryId: {
                default: ''
            }
        },
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/suppliers/search?term=${encodeURIComponent( this.list.term )}&category-id=${this.categoryId}`;
            },
            getEmittedEventName: function() {
                return 'supplier-select';
            },
            getTitle: function( supplier ) {
                // item title only
                return supplier.title;
            }
        }
    });

    /**
     * broker search component
     */
    Vue.component( 'broker-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/brokers/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'broker-select';
            },
            getTitle: function (broker){
                return broker.title;
            }
        },
        props: {
            labelText: {
                default: 'Search Broker'
            },
            titleFieldName: {
                default: 'brokerTitle'
            },
            idFieldName: {
                default: 'brokerId'
            },
            codeFieldName: {
                default: 'brokerCode'
            }
        }
    });


    /**
     * sale-quote search component
     */
    Vue.component( 'sale-quote-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/local-sale/sale-quote/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'sale-quote-select';
            }
        },
        props: {
            labelText: {
                default: 'Search Sale Quote'
            },
            titleFieldName: {
                default: 'saleQuoteTitle'
            },
            idFieldName: {
                default: 'saleQuoteId'
            },
            codeFieldName: {
                default: ''
            }
        }
    });



    /**
     * sale-order search component
     */
    Vue.component( 'sale-order-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/sale-order/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'sale-order-select';
            }
        },
        props: {
            labelText: {
                default: 'Search Sale Order'
            },
            titleFieldName: {
                default: 'saleOrderTitle'
            },
            idFieldName: {
                default: 'saleOrderId'
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * customer search component
     */
    Vue.component( 'customer-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/customers/search?term=${encodeURIComponent( this.list.term )}&categoryId=${encodeURIComponent(this.categoryId)}&ids=${encodeURIComponent(this.ids)}`;
            },
            getEmittedEventName: function() {
                return 'customer-select';
            }
        },
        props: {
            labelText: {
                default: 'Search Customer'
            },
            titleFieldName: {
                default: 'customerTitle'
            },
            idFieldName: {
                default: 'customerId'
            },
            codeFieldName: {
                default: 'customerCode'
            },
            categoryId: {
              default: ''
            },
            ids: {
                default: ''
            }
        }
    });

    /**
     * location unit search component
     */
    Vue.component( 'location-unit-search', {
        mixins: [ searchComponentMixin ],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/locations/units/search?term=${encodeURIComponent( this.list.term )}`
                if ( !! this.siteId ) {
                    url += `&siteId=${this.siteId}`;
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'location-unit-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityTwoId = item.siteId;
                this.entityId = item.id;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search Unit'
            },
            titleFieldName: {
                default: 'unitTitle'
            },
            idFieldName: {
                default: 'unitId'
            },
            entityTwoIdFieldName :{
                default: null
            },
            codeFieldName: {
                default: ''
            },
            siteId: {
                default: null
            },
        }
    });

    /**
     * sub meter search component
     */
    Vue.component( 'sub-meter-search', {
        mixins: [ searchComponentMixin ],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/utilities/sub-meters/search?term=${encodeURIComponent( this.list.term )}`
                return url;
            },
            getEmittedEventName: function() {
                return 'sub-meter-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityTwoId = item.siteId;
                this.entityId = item.id;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function(item){
                return `${item.location} ( ${item.meterNumber} )`;
            }
        },
        props: {
            labelText: {
                default: 'Search Sub Meter'
            },
            titleFieldName: {
                default: 'Sub Meter Title'
            },
            idFieldName: {
                default: 'subMeterId'
            },
            entityTwoIdFieldName :{
                default: null
            },
            codeFieldName: {
                default: ''
            },
            siteId: {
                default: null
            },
        }
    });


    /**
     * location site search component
     */
    Vue.component( 'location-site-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/ctp/rest/locations/sites/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'location-site-select';
            }
        },
        props: {
            labelText: {
                default: 'Search Site'
            },
            titleFieldName: {
                default: 'siteTitle'
            },
            idFieldName: {
                default: 'siteId'
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * Work Order Type search component
     */
    Vue.component('wo-type-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function () {
                return `/uind/rest/uic/work-order/type/search?term=${encodeURIComponent(this.list.term)}`;
            },
            getEmittedEventName: function () {
                return 'wo-type-select';
            }
        },
        props: {
            labelText: {
                default: 'Search type'
            },
            titleFieldName: {
                default: 'typeTitle'
            },
            idFieldName: {
                default: 'typeId'
            },
            codeFieldName: {
                default: 'typeCode'
            }
        }
    });

    /**
     * item search component
     */
    Vue.component( 'item-search', {
        mixins: [searchComponentMixin],
        props: {
            labelText: {
                default: 'Search Item'
            },
            titleFieldName: {
                default: 'itemTitle'
            },
            idFieldName: {
                default: 'itemId'
            },
            codeFieldName: {
                default: 'itemCode'
            },
            poItemsOnly:{
                default:false
            },
            typeIds: {
                default: null
            },
            showSkuOnly: {
                default: false
            },
        },
        methods: {
            getSearchUrl: function() {
                return `/ctp/rest/items/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'item-select';
            },
            getTitle: function( item ) {
                // if show sku only
                if ( this.showSkuOnly ) {
                    return item.sku;
                }
                // else format item title with code
                if ( typeof item.code !== 'undefined' ) {
                    return `${item.title} (${item.code})`;
                }
                // item title only
                return item.title;
            },
        }
    });

    /**
     * item search component For Service Items only
     */
    Vue.component('item-search-indent', {
        mixins: [searchComponentMixin],
        props: {
            labelText: {
                default: 'Search Item'
            },
            titleFieldName: {
                default: 'itemTitle'
            },
            idFieldName: {
                default: 'itemId'
            },
            codeFieldName: {
                default: 'itemCode'
            },
            woItemsOnly: {
                default: false
            },
            typeIds: {
                default: null
            },
            showSkuOnly: {
                default: false
            },
            indentType: {
                default: 'PURCHASE_ORDER'
            }

        },
        methods: {
            getSearchUrl: function () {
                return `/uind/rest/uic/items/search-service-item?indent-type=${this.indentType}&term=${encodeURIComponent(this.list.term)}&po-items-only=${this.woItemsOnly}&type-ids=${!!this.typeIds ? this.typeIds.join(',') : ''}`;
            },
            getEmittedEventName: function () {
                return 'item-select';
            },
            getTitle: function (item) {
                // if show sku only
                if (this.showSkuOnly) {
                    return item.sku;
                }
                // else format item title with code
                if (typeof item.code !== 'undefined') {
                    return `${item.title} (${item.code})`;
                }
                // item title only
                return item.title;
            },
        }
    });

    /**
     * item configuration search component
     */
    Vue.component( 'item-configuration-search', {
        mixins: [searchComponentMixin],
        props: {
            labelText: {
                default: 'Search Item Config'
            },
            titleFieldName: {
                default: 'configTitle'
            },
            idFieldName: {
                default: 'itemConfigId'
            },
            codeFieldName: {
                default: ''
            },
            itemId: {
                default: ''
            },
            itemLookupCode: {
                default: ''
            },
        },
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/items/configurations/search?term=${encodeURIComponent( this.list.term )}&`;
                if ( !! this.itemId ) {
                    url += `item-id=${this.itemId}&`;
                }
                if ( !! this.itemLookupCode ) {
                    url += `item-lookup-code=${this.itemLookupCode}&`;
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'item-configuration-select';
            },
            getTitle: function( item ) {
                return `${item.title} - ${item.itemLookupCode} (${item.configurationUom} of ${item.configurationUnits} ${item.childUom})`;
            },
            mounted: async function() {
                console(this.itemId);
            },
        }
    });

    /**
    * item type search
    */
    Vue.component( 'item-type-search' ,{
        mixins : [ searchComponentMixin ],
        methods : {
            getSearchUrl: function() {
                return `/uind/rest/uic/items/types/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'item-type-select';
            }
        },
        props: {
            labelText: {
                default: 'Item Type Search'
            },
            titleFieldName: {
                default: 'itemTypeTitle'
            },
            idFieldName: {
                default: 'itemTypeId'
            },
            codeFieldName: {
                default: 'itemTypeCode'
            }
        }
    });

    /**
     * brand search component
     */
    Vue.component( 'brand-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/admin/item-brands/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'brand-select';
            }
        },
        props: {
            labelText: {
                default: 'Search Brand'
            },
            titleFieldName: {
                default: 'brandTitle'
            },
            idFieldName: {
                default: 'brandId'
            },
            codeFieldName: {
                default: 'brandCode'
            }
        }
    });

    /**
     * gin search component (un-tagged by dc number)
     */
    Vue.component( 'gin-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/gins/un-tagged/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'gin-select';
            },
            getTitle: function( item ) {
                return item.deliveryChallanNumber + ' (' + item.code + ') ' + ' (SUP-' + item.supplierId + ')';
            },
        },
        props: {
            labelText: {
                default: 'Search GIN'
            },
            titleFieldName: {
                default: 'ginTitle'
            },
            idFieldName: {
                default: 'ginId'
            },
            codeFieldName: {
                default: 'ginCode'
            }
        }
    });

    /**
     * item unit search component
     */
    Vue.component( 'item-unit-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/items/units/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'item-unit-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            }
        },
        props: {
            labelText: {
                default: 'Search UOM'
            },
            titleFieldName: {
                default: 'unitTitle'
            },
            idFieldName: {
                default: 'unitId'
            },
            codeFieldName: {
                default: 'unitCode'
            }
        },
    });

    /**
     * cosmos sku expression search component
     */
    Vue.component( 'cosmos-sku-expression-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/cosmos-product-sku-expression/search?term=${encodeURIComponent( this.list.term )}`;
                if ( !! this.marketplace ) {
                    url += `&marketplace=${encodeURIComponent( this.marketplace )}`;
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'cosmos-sku-expression-select';
            },
            getTitle: function( item ) {
                let title = item.skuExpression;
                if ( !! item.description || item.size || item.pack ) {
                    if ( !! item.description ) {
                        title += ` / ${item.description}`
                    }
                    if ( !! item.size ) {
                        title += ` / ${item.size}`
                    }
                    if ( !! item.pack ) {
                        title += ` / ${item.pack}`
                    }
                }
                return title;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search Expression'
            },
            idFieldName: {
                default: 'expression'
            },
            titleFieldName: {
                default: ''
            },
            codeFieldName: {
                default: ''
            },
            marketplace: {
                default: ''
            }
        },
    });

    /**
     * account search
     */
    Vue.component( 'account-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {

                if(this.isAllAccountSearch) {
                    return `/uind/rest/accounts-finance/accounts/search?term=${encodeURIComponent( this.list.term )}`;
                }

                // if cash and bank account only
                if ( this.cashAndBankAccountsOnly ) {
                    return `/uind/rest/accounts-finance/accounts/cash-and-bank-accounts/search?term=${encodeURIComponent( this.list.term )}${this.getActiveParam()}`;
                }
                // if fund accounts only (bank accounts)
                if ( this.fundAccountsOnly ) {
                    return `/uind/rest/accounts-finance/accounts/fund-accounts/search?term=${encodeURIComponent( this.list.term )}${this.getActiveParam()}`;
                }
                // build url
                let url = `/uind/rest/accounts-finance/accounts/search?term=${encodeURIComponent( this.list.term )}${this.getActiveParam()}`;
                if ( this.accountLevelFourIds.length > 0 ) {
                    url += `&level-four-ids=${this.accountLevelFourIds.join( ',' )}`;
                }
                if ( this.accountLevelThreeIds.length > 0 ) {
                    url += `&level-three-ids=${this.accountLevelThreeIds.join( ',' )}`;
                }
                if ( this.accountLevelTwoIds.length > 0 ) {
                    url += `&level-two-ids=${this.accountLevelTwoIds.join( ',' )}`;
                }
                if ( !! this.parentEntityType ) {
                    url += `&parent-entity-type=${this.parentEntityType}`;
                }
                if ( !! this.parentEntityId ) {
                    url += `&parent-entity-id=${this.parentEntityId}`;
                }
                return url;
            },
            getActiveParam: function() {
                if ( this.activeStatus != null ) {
                    if ( this.activeStatus === 'ACTIVE' ) {
                        return '&is-active=true';
                    }
                    if ( this.activeStatus === 'INACTIVE' ) {
                        return '&is-active=false';
                    }
                }
                return '';
            },
            getEmittedEventName: function() {
                return 'account-select';
            },
            getDisplayTitle: function( item ) {
                return this.isOnlyCode ? item.code :`${item.hierarchyString}`;
            },
            getTitle: function( item ) {
                return  this.isOnlyCode ? item.code : item.title;
            }
        },
        props: {
            labelText: {
                default: 'Search Account'
            },
            titleFieldName: {
                default: 'accountTitle'
            },
            idFieldName: {
                default: 'accountId'
            },
            codeFieldName: {
                default: 'accountCode'
            },
            parentEntityType: {
                default: null
            },
            parentEntityId: {
                default: null
            },
            isAllAccountSearch: {
               default: false
            },
            accountLevelTwoIds: {
                default() {
                    return []
                }
            },
            accountLevelThreeIds: {
                default() {
                    return []
                }
            },
            accountLevelFourIds: {
                default() {
                    return []
                }
            },
            fundAccountsOnly: {
                default: false
            },
            cashAndBankAccountsOnly: {
                default: false
            },
            activeStatus: {
                default: null
            },
            isOnlyCode: {
                default: false
            }


        },
        mounted: function (){
            console.log(this.isOnlyCode)
        }
    });

    /**
     * account transaction search
     */
    Vue.component( 'account-transaction-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let paramPart = `term=${encodeURIComponent( this.list.term )}`;
                if ( !! this.accountId ) {
                    paramPart += `&account-id=${this.accountId}`;
                }
                if ( !! this.instrumentId ) {
                    paramPart += `&instrument-id=${this.instrumentId}`;
                }
                if ( !! this.instrumentNumber ) {
                    paramPart += `&instrument-number=${this.instrumentNumber}`;
                }
                if ( this.bankStatementUntaggedOnly != null ) {
                    paramPart += `&bank-statement-untagged-only=${this.bankStatementUntaggedOnly}`;
                }
                return `/uind/rest/accounts-finance/accounts/transactions/search?${paramPart}`;
            },
            getEmittedEventName: function() {
                return 'account-transaction-select';
            },
            getTitle: function( item ) {
                return `${item.code} (${window.ctp.utils.formatCurrencyPKR( item.debitTotal )})`;
            },
        },
        props: {
            labelText: {
                default: 'Search Voucher'
            },
            titleFieldName: {
                default: 'transactionTitle'
            },
            idFieldName: {
                default: 'transactionId'
            },
            codeFieldName: {
                default: 'transactionCode'
            },
            accountId: {
                default: null
            },
            instrumentId: {
                default: null
            },
            instrumentNumber: {
                default: null
            },
            instrumentNumber: {
                default: null
            },
            bankStatementUntaggedOnly: {
                default: null
            }
        }
    });

    /**
     * bank statement search
     */
    Vue.component( 'bank-statement-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/accounts-finance/banking/bank-statements/search?term=${encodeURIComponent( this.list.term )}`;
                if ( this.date != null ) {
                    url += `&date=${this.date}`
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'bank-statement-select';
            },
            getTitle: function( statement ) {
                let title = `${statement.referenceNumber} / ${statement.fullBankAccountNumber}`;
                if ( statement.debitAmount > 0 ) {
                    title += ` / DEBIT: ${window.ctp.utils.formatCurrencyPKR( statement.debitAmount )}`;
                }
                if ( statement.creditAmount > 0 ) {
                    title += ` / CREDIT: ${window.ctp.utils.formatCurrencyPKR( statement.creditAmount )}`;
                }
                title += ` / ${window.ctp.utils.getFormattedDateStringFromDateString(statement.transactionDate)}`;
                return title;
            }
        },
        props: {
            labelText: {
                default: 'Search Payment'
            },
            titleFieldName: {
                default: 'payToTitle'
            },
            idFieldName: {
                default: 'id'
            },
            entityTwoIdFieldName: {
                default: ''
            },
            codeFieldName: {
                default: ''
            },
            date: {
                default: null
            }
        }
    });

    /**
     * banking institution search
     */
    Vue.component( 'banking-institution-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/admin/banking-institutions/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'banking-institution-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
        },
        props: {
            labelText: {
                default: 'Search Bank'
            },
            titleFieldName: {
                default: 'bankingInstitutionTitle'
            },
            idFieldName: {
                default: 'bankingInstitutionId'
            },
            codeFieldName: {
                default: 'bankingInstitutionCode'
            }
        }
    });

    /**
     * payment-request-type-search
     */
    Vue.component( 'payment-request-type-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                    return `/uind/rest/accounts-finance/payment-request-types/search?term=${encodeURIComponent(this.list.term)}`;

            },
            getEmittedEventName: function() {
                return 'payment-type-select';
            },
            getTitle: function( item ) {
                return item.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Payment Request Type'
            },
            titleFieldName: {
                default: 'paymentRequestTypeCode'
            }
        }
    });


    /**
     * financing liability search
     */
    Vue.component( 'financing-liability-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/accounts/search/financing-liability-accounts?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'financing-liability-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
        },
        props: {
            labelText: {
                default: 'Search Financing Liability'
            },
            titleFieldName: {
                default: 'accountTitle'
            },
            idFieldName: {
                default: 'accountId'
            },
            codeFieldName: {
                default: 'accountCode'
            }
        }
    });

    /**
     * expense search
     */
    Vue.component( 'expense-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                // return `/uind/rest/accounts-finance/accounts/search/expense-accounts?term=${encodeURIComponent( this.list.term )}`;
                return `/uind/rest/accounts-finance/accounts/search?term=${encodeURIComponent( this.list.term )}`;

            },
            getEmittedEventName: function() {
                return 'expense-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
        },
        props: {
            labelText: {
                default: 'Search Expense'
            },
            titleFieldName: {
                default: 'accountTitle'
            },
            idFieldName: {
                default: 'accountId'
            },
            codeFieldName: {
                default: 'accountCode'
            }
        }
    });

    /**
     * security deposit search
     */
    Vue.component( 'security-deposit-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/accounts/search/security-deposit-accounts?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'security-deposit-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
        },
        props: {
            labelText: {
                default: 'Search Security Deposit'
            },
            titleFieldName: {
                default: 'accountTitle'
            },
            idFieldName: {
                default: 'accountId'
            },
            codeFieldName: {
                default: 'accountCode'
            }
        }
    });

    /**
     * financing facility search
     */
    Vue.component( 'financing-facility-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/banking/financing-facilities/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'financing-facility-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
        },
        props: {
            labelText: {
                default: 'Search Financing Facility'
            },
            titleFieldName: {
                default: 'financingFacilityTitle'
            },
            idFieldName: {
                default: 'financingFacilityId'
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * account level four search
     */
    Vue.component( 'account-level-four-search', {
        mixins: [searchComponentMixin],
        props: {
            oneId: {
                default: null
            },
            twoId: {
                default: null
            },
            threeId: {
                default: null
            },
            fourId: {
                default: null
            },
            companyId: {
                default: null
            },
            labelText: {
                default: 'Search Group of Accounts'
            },
            titleFieldName: {
                default: 'hierarchyString'
            },
            oneIdFieldName: {
                default: 'accountLevelOneId'
            },
            twoIdFieldName: {
                default: 'accountLevelTwoId'
            },
            threeIdFieldName: {
                default: 'accountLevelThreeId'
            },
            fourIdFieldName: {
                default: 'accountLevelFourId'
            }
        },
        methods: {
            getSearchUrl: function() {
                if( this.companyId ) {
                    return `/uind/rest/accounts-finance/accounts/level-fours/search?term=${encodeURIComponent( this.list.term )}&company=${encodeURIComponent( this.companyId )}`;
                } else {
                    return `/uind/rest/accounts-finance/accounts/level-fours/search?term=${encodeURIComponent( this.list.term )}`;
                }
            },
            getEmittedEventName: function() {
                return 'account-level-four-select';
            },
            getTitle: function( item ) {
                return item.hierarchyString;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.oneId = item.accountLevelOneId;
                this.twoId = item.accountLevelTwoId;
                this.threeId = item.accountLevelThreeId;
                this.fourId = item.id;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            }
        },
        template: `
            <div class="uind-autocomplete-container">
                <input type="hidden" v-bind:name="oneIdFieldName" v-model="oneId">
                <input type="hidden" v-bind:name="twoIdFieldName" v-model="twoId">
                <input type="hidden" v-bind:name="threeIdFieldName" v-model="threeId">
                <input type="hidden" v-bind:name="fourIdFieldName" v-model="fourId">
                <label v-if="showLabel">{{ labelText }}</label>
                <input type="text" class="form-control"
                        v-bind:name="titleFieldName"
                        v-model="list.term"
                        v-on:keyup="onKeyup( $event )" 
                        v-bind:required="required"
                        v-bind:disabled="disabled"
                        autocomplete="off">
                <!-- autocomplete list -->
                <div class="uind-autocomplete-list" v-if="list.opened" v-bind:style="list.position">
                    <a href="#" v-if="list.items.length > 0 && ! loading" v-for="(item, index) in list.items" 
                                v-bind:key="getItemKey(item)" 
                                v-bind:child="item" 
                                v-bind:index="index" 
                                v-html="getTitleHtml(item)"
                                v-on:click="setEntity(item, $event); $emit(getEmittedEventName(), item.id, item);"></a>
                    <li v-if="list.items.length == 0 && ! loading" v-on:click="handleNoResults">No results found</li>
                    <li v-if="loading" class="text-center"><div class="spinner-border text-secondary spinner-border-sm"></div></li>
                </div>
            </div>
        `
    });

    /**
     * invoice search
     */
    Vue.component( 'invoice-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/invoices/search?number=${encodeURIComponent( this.list.term )}&supplierId=${encodeURIComponent( this.supplierId )}`;
            },
            getEmittedEventName: function() {
                return 'invoice-select';
            },
            getTitle: function( item ) {
                return `${item.number} (SUP-${item.supplierId})`;
            }
        },
        props: {
            labelText: {
                default: 'Search Invoice'
            },
            titleFieldName: {
                default: 'invoiceNumber'
            },
            idFieldName: {
                default: 'invoiceId'
            },
            supplierId: {
                default: 0
            },
            codeFieldName: {
                default: 'invoiceCode'
            }
        }
    });

    /**
     * cosmos supplier invoice search
     */
    Vue.component( 'cosmos-supplier-invoice-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/cosmos/inventory/supplier-invoices/search-by-hbl?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'cosmos-supplier-invoice-select';
            },
            getTitle: function( item ) {
                return item.hblNumber;
            },
        },
        props: {
            labelText: {
                default: 'Search HBL#'
            },
            titleFieldName: {
                default: 'houseBillOfLading'
            },
            idFieldName: {
                default: ''
            },
            codeFieldName: {
                default: ''
            }
        }
    });



    /**
     * employee and contractor search component
     */
    Vue.component( 'employee-worker-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/employees/search/serial-number?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'employee-select';
            },
            getTitle: function( item ) {
                if ( !! item.serialNumber ) {
                    return `${item.fullName} - ( ${item.serialNumber} ) - ( ${item.workerType} )`;
                }
                return item.fullName;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search Employee'
            },
            titleFieldName: {
                default: 'employeeTitle'
            },
            idFieldName: {
                default: 'employeeId'
            },
            codeFieldName: {
                default: 'employeeCode'
            }
        },
    });

    /**
     * employee search component
     */
    Vue.component( 'worker-employee-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/employees/search/worker-employee/serial-number?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'employee-select';
            },
            getTitle: function( item ) {
                if ( !! item.serialNumber ) {
                    return `${item.fullName} - ( ${item.serialNumber} ) - ( ${item.workerType} )`;
                }
                return item.fullName;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search Employee'
            },
            titleFieldName: {
                default: 'employeeGrantPermissionTitle'
            },
            idFieldName: {
                default: 'permissionGrantedBy'
            },
            codeFieldName: {
                default: 'employeeCode'
            }
        },
    });

    /**
     * employee and contractor search component
     */
    Vue.component( 'room-search', {
        mixins: [searchComponentMixin],
        props : ['floors', 'sites', 'colonies'],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/workers-society/room/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'room-select';
            },
            getTitle: function( item ) {
                const site = this.sites.filter((e) => e.id == item.siteId);
                const colony = this.colonies.filter((e) => e.id == item.colonyId);
                const floor = this.floors.filter((e) => e.id == item.floorId);
                if ( !! item.roomCode ) {
                     return `${site[0].title} > ${colony[0].title} > ${item.roomCode} - ( ${item.roomTitle} ) `;
                }
                    return item.roomTitle;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search Room'
            },
            titleFieldName: {
                default: 'RoomTitle'
            },
            idFieldName: {
                default: 'roomId'
            },
            codeFieldName: {
                default: 'roomCode'
            },
            sites :{
                default :[]
            },
            floors :{
                default : []
            },
            colonies :{
                default :[]
            }
        },
    });

    /**
     * city area search component
     */
    Vue.component( 'city-area-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/admin/city-areas/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'city-area-select';
            },
            getTitle: function( item ) {
                return item.title;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search City Area'
            },
            titleFieldName: {
                default: 'cityAreaTitle'
            },
            idFieldName: {
                default: 'cityAreaId'
            },
            codeFieldName: {
                default: 'cityAreaCode'
            }
        },
    });

    /**
     * city area search component
     */
    Vue.component( 'item-category-hs-code-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/admin/fbr-item-category-hs-codes/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'item-category-hs-code-select';
            },
            getTitle: function( item ) {
                return `${ item.title } (${ item.hsCode })`;
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
        },
        props: {
            labelText: {
                default: 'Search Category'
            },
            titleFieldName: {
                default: 'categoryHsCodeTitle'
            },
            idFieldName: {
                default: 'categoryHsCodeId'
            },
            codeFieldName: {
                default: 'categoryHsCode'
            }
        },
    });

    /**
     * visitor search component (by CNIC)
     */
    Vue.component( 'visitor-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/vms/visitors/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'visitor-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.cnic;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = item.cnic;
                this.closeList();
            },
            getTitle: function( item ) {
                if ( typeof item.cnic !== 'undefined' ) {
                    return `${item.cnic}`;
                }
                return item.title;
            },
            onKeyup: async function( $event ) {
                this.$emit('cnic-updated', $event.target.value);
                // if escape key, close the list
                if ( $event.keyCode === 27 ) {
                    this.closeList();
                } else {
                    // else get and show suggestions
                    await this.showSuggestions();
                }
            },
        },
        props: {
            labelText: {
                default: 'Visitor CNIC'
            },
            titleFieldName: {
                default: 'visitorCNIC'
            },
            idFieldName: {
                default: 'visitorId'
            },
            codeFieldName: {
                default: 'visitorCode'
            }
        }
    });

    /**
     * contractor search
     */
    Vue.component( 'contractor-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/contractors/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'contractor-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = item.fullName;
                this.closeList();
            },
            getTitle: function( item ) {
                return item.fullName;
            }
        },
        props: {
            labelText: {
                default: 'Search Contractor'
            },
            titleFieldName: {
                default: 'contractorTitle'
            },
            idFieldName: {
                default: 'contractorId'
            },
            codeFieldName: {
                default: 'contractorCode'
            }
        }
    });

    /**
     * company hierarchy search
     */
    Vue.component( 'department-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/departments/search?term=${encodeURIComponent( this.list.term )}&functionId=${this.functionId}`;
            },
            getEmittedEventName: function() {
                return 'department-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = item.functionId;
                this.entityThreeId = item.companyId;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.title;
            }
        },
        props: {
            labelText: {
                default: 'Search Department'
            },
            titleFieldName: {
                default: 'departmentTitle'
            },
            idFieldName: {
                default: 'departmentId'
            },
            entityTwoIdFieldName: {
                default: 'functionId'
            },
            entityThreeIdFieldName: {
                default: 'companyId'
            },
            codeFieldName: {
                default: 'departmentCode'
            },
            functionId: {
                default: ''
            }
        }
    });

    /**
     * cost center search
     */
    Vue.component( 'cost-center-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/cost-centers/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'cost-center-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.costCenterOneId;
                this.entityTwoId = item.costCenterTwoId;
                this.entityThreeId = item.costCenterThreeId;
                this.entityFourId = item.costCenterFourId;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return `${item.hierarchyString} - (${item.code})`;
            }
        },
        props: {
            labelText: {
                default: 'Search Cost Center'
            },
            titleFieldName: {
                default: 'costCenterTitle'
            },
            idFieldName: {
                default: 'costCenterOneId'
            },
            entityTwoIdFieldName: {
                default: 'costCenterTwoId'
            },
            entityThreeIdFieldName: {
                default: 'costCenterThreeId'
            },
            entityFourIdFieldName: {
                default: 'costCenterFourId'
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * cost center search
     */
    Vue.component( 'cost-center-one-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/cost-centers/search/one?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'cost-center-one-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                   this.entityId = item.id;
                   this.entityCode = '';
                   this.cachedEntity = item;
                   this.list.selected = item;
                   this.list.term = this.getTitle( item );
                   this.closeList();
            },
            getTitle: function( item ) {
                return `${item.title} ( ${item.id} )`  ;
            }
        },
        props: {
            labelText: {
                default: 'Search Cost Center'
            },
            titleFieldName: {
                default: 'costCenterTitle'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * cost center search
     */
    Vue.component( 'cost-center-four-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/cost-centers/search/four?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'cost-center-one-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                   this.entityId = item.id;
                   this.entityCode = '';
                   this.cachedEntity = item;
                   this.list.selected = item;
                   this.list.term = this.getTitle( item );
                   this.closeList();
            },
            getTitle: function( item ) {
                return `${item.title} ( ${item.id} )`  ;
            }
        },
        props: {
            labelText: {
                default: 'Search Cost Center'
            },
            titleFieldName: {
                default: 'costCenterTitle'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * cost center search
     */
    Vue.component( 'cost-center-hierarchy-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/cost-centers/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'cost-center-hierarchy-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                   this.entityFourId = item.fourId;
                   this.entityTwoId = item.twoId;
                   this.entityThreeId = item.threeId;
                   this.entityId = item.oneId;
                   this.entityCode = '';
                   this.cachedEntity = item;
                   this.list.selected = item;
                   this.list.term = this.getTitle( item );
                   this.closeList();
            },
            getTitle: function( item ) {
                return `${item.hierarchyString} - (${item.code})`;
            }
        },
        props: {
            labelText: {
                default: 'Search Cost Center'
            },
            titleFieldName: {
                default: 'costCenterTitle'
            },
            idFieldName: {
                default: 'oneId'
            },
            entityTwoIdFieldName: {
                default: 'twoId'
            },
            entityThreeIdFieldName: {
                default: 'threeId'
            },
            entityFourIdFieldName: {
                default: 'fourId'
            },
            codeFieldName: {
                default: ''
            }
        }
    });


    /**
     * function search
     */
    Vue.component( 'function-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/hrms/functions/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'function-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = item.companyId;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
                if ( this.clearTextOnSelect ) {
                    this.list.term = '';
                }
            },
            getTitle: function( item ) {
                return item.title;
            }
        },
        props: {
            labelText: {
                default: 'Search Function'
            },
            titleFieldName: {
                default: 'functionTitle'
            },
            idFieldName: {
                default: 'functionId'
            },
            entityTwoIdFieldName: {
                default: 'companyId'
            },
            codeFieldName: {
                default: 'functionCode'
            }
        }
    });

    /**
     * payment request search
     */
    Vue.component( 'payment-request-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/payment-requests/find-by-ids?ids=${encodeURIComponent( this.list.term )}&type=${encodeURIComponent( this.type )}`;
            },
            getEmittedEventName: function() {
                return 'payment-request-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return "PAY-REQ-"+item.id;
            }
        },
        props: {
            labelText: {
                default: 'Search Payment Request'
            },
            titleFieldName: {
                default: 'payToTitle'
            },
            idFieldName: {
                default: 'id'
            },
            entityTwoIdFieldName: {
                default: ''
            },
            codeFieldName: {
                default: ''
            },
            type: {
                default: 'all'
            }
        }
    });

    /**
     * payment search
     */
    Vue.component( 'payment-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/payments/find-by-ids?ids=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'pay-request-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Payment'
            },
            titleFieldName: {
                default: 'payToTitle'
            },
            idFieldName: {
                default: 'id'
            },
            entityTwoIdFieldName: {
                default: ''
            },
            codeFieldName: {
                default: ''
            }
        }
    });

    /**
     * online payment collection search
     */
    Vue.component( 'payment-collection-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/accounts-finance/online-payment-collections/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'payment-collection-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return `${item.code}`;
            }
        },
        props: {
            labelText: {
                default: 'Search Payment Collection'
            },
            titleFieldName: {
                default: 'collectionTitle'
            },
            idFieldName: {
                default: 'id'
            },
            entityTwoIdFieldName: {
                default: ''
            },
            codeFieldName: {
                default: ''
            },
            type: {
                default: ''
            }
        }
    });

    /**
     * loader component
     */
    Vue.component( 'spinner', {
        props: {
            sizeClass: {
                default: ''
            },
            paddingClass: {
                default: 'p-4'
            },
            colorClass: {
                default: 'text-secondary'
            }
        },
        template: `
            <div class="d-flex justify-content-center" v-bind:class="paddingClass">
                <div class="spinner-border" v-bind:class="{[sizeClass]: true, [paddingClass]: true, [colorClass]: true}"></div>
            </div>
        `
    });

    /**
     * feature update feed
     */
    Vue.component( 'feature-update-feed', {
        props: ['type'],
        data: function() {
            return {
                updates: [],
                loaded: false
            }
        },
        methods: {
            getFeedUrl: function() {
                return `/uind/rest/admin/feature-updates/recent?type=${encodeURIComponent( this.type )}`;
            },
            getFeedData: async function() {
                this.updates = await $.get( this.getFeedUrl() );
                this.loaded = true;
            },
            getUpdateViewLink: function( update ) {
                return `/uind/admin/feature-updates/view/${update.id}`;
            },
            getUpdateDateFormatted: function( update ) {
                return window.ctp.utils.getFormattedDateStringFromDateString( update.dateTimeCreated );
            },
            wasPublishedToday: function( update ) {
                let today = new Date();
                let updateDate = new Date( Date.parse( update.dateTimeCreated ) );
                return ( today.getDate() == updateDate.getDate()
                    && today.getMonth() == updateDate.getMonth()
                    && today.getFullYear() == updateDate.getFullYear() );
            }
        },
        template: `
            <div class="card">
                <div class="card-header">Updates</div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item" v-if="loaded && updates.length > 0" v-for="(update, index) in updates">
                        <a class="text-reset" v-bind:href="getUpdateViewLink(update)">
                            <span>{{ update.title }}</span>
                            <small class="text-secondary font-italic">on {{ getUpdateDateFormatted(update) }}</small>
                        </a>
                        <span class="badge badge-danger badge-pill" v-if="wasPublishedToday(update)">New</span>
                    </li>
                    <li class="list-group-item text-center" v-if="!loaded">
                        <span class="spinner-border text-secondary spinner-border-sm"></span>
                    </li>
                    <li class="list-group-item" v-if="loaded && updates.length == 0">
                        No recent updates.
                    </li>
                </ul>
            </div>
        `,
        mounted: function() {
            // get feed data
            this.getFeedData();
        }
    });

    /**
     * container search component
     */
    Vue.component( 'container-search', {
        mixins: [searchComponentMixin],
        props: ['billId','supplierId','invoiceDate','isOnlyContainer'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/commercial-export/search?term=${encodeURIComponent( this.list.term )}&isOnlyContainer=${encodeURIComponent( this.isOnlyContainer )}&billId=${encodeURIComponent( this.billId )}&supplierId=${encodeURIComponent( this.supplierId )}&invoiceDate=${encodeURIComponent( this.invoiceDate )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'container-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.appointmentId +" ( "+item.invoice.invoiceNumber+" ) ";
            }
        },
        props: {
            labelText: {
                default: 'Search Container'
            },
            titleFieldName: {
                default: 'appointmentId'
            },
            idFieldName: {
                default: 'appointmentId'
            },
            codeFieldName: {
                default: ''
            },
            billId: {
                default: 0
            },
            supplierId: {
                default: 0
            },
            invoiceDate: {
                default: null
            },
            isOnlyContainer: {
                default: false
            }
        }
    });

    /**
     * cosmos invoice search component
     */
    Vue.component( 'cosmos-invoice-search', {
        mixins: [searchComponentMixin],
        props: ['exportId','invoiceNumber','currencySymbol','isAdvanceReceipt'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/commercial-export/cosmos-supplier-invoice/search?term=${encodeURIComponent( this.list.term )}&currency=${encodeURIComponent( this.currencySymbol )}&exportId=${encodeURIComponent( this.exportId )}&isAdvanceReceipt=${encodeURIComponent( this.isAdvanceReceipt )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'invoice-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.invoiceNumber +" ( "+item.containerNo+" ) ";
            }
        },
        props: {
            labelText: {
                default: 'Search Cosmos Supplier Invoice'
            },
            titleFieldName: {
                default: 'invoiceNumber'
            },
            idFieldName: {
                default: 'invoiceNumber'
            },
            codeFieldName: {
                default: ''
            },
            exportId: {
                default: 0
            },
            isAdvanceReceipt: {
                default: false
            },
            currencySymbol: {
                default: ""
            }
        }
    });

    /**
     * cosmos machine search component
     */
    Vue.component( 'cosmos-machine-search', {
        mixins: [searchComponentMixin],
        props: ['serialNumber'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/cosmos-machines/search?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'machine-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.serialNumber;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.serialNumber +" ( "+item.model+" ) ";
            }
        },
        props: {
            labelText: {
                default: 'Search Cosmos Machines'
            },
            titleFieldName: {
                default: 'machineTitle'
            },
            idFieldName: {
                default: 'machineSerialNumber'
            },
            codeFieldName: {
                default: ''
            },
            serialNumber: {
                default: ""
            }
        }
    });

    /**
     * cosmos machine search component
     */
    Vue.component( 'item-artifact-cosmos-machine-search', {
        mixins: [searchComponentMixin],
        props: ['serialNumber'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/uic/cosmos-machines/search?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'machine-select';
            },
            getTitle: function( item ) {
                return item.serialNumber +" ( "+item.model+" ) ";
            }
        },
        props: {
            labelText: {
                default: 'Search Cosmos Machines'
            },
            titleFieldName: {
                default: 'machineTitle'
            },
            idFieldName: {
                default: 'machineSerialNumber'
            },
            codeFieldName: {
                default: ''
            },
            serialNumber: {
                default: ""
            }
        }
    });

    /**
     * advance receipt search component
     */
    Vue.component( 'advance-receipt-search', {
        mixins: [searchComponentMixin],
        props: ['code','id'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/accounts-finance/advance-receipt/search-by-code?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'advance-receipt-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = item.code;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.code +" ( "+item.refNumber+" ) ";
            }
        },
        props: {
            labelText: {
                default: 'Search Advance Receipt'
            },
            titleFieldName: {
                default: 'code'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: ''
            },
            code: {
                default: ""
            },
            id: {
                default: 0
            }
        }
    });

    /**
     * Treasury Desk Rate Negotiation search component
     */
    Vue.component( 'treasury-desk-rate-negotiation-search', {
        mixins: [searchComponentMixin],
        props: ['code','id'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/accounts-finance/treasury-desk-rate-negotiation/search-by-code?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'treasury-desk-rate-negotiation-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = item.code;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return `${item.code} -> ${item.customerTitle} `;
            }
        },
        props: {
            labelText: {
                default: 'Search Treasury Rate Negotiation'
            },
            titleFieldName: {
                default: 'rateNegotiationCode'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: ''
            },
            code: {
                default: ""
            },
            id: {
                default: 0
            }
        }
    });

    /**
     * Treasury Desk Rate search component
     */
    Vue.component( 'treasury-desk-rate-search', {
        mixins: [searchComponentMixin],
        props: ['code','id'],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/accounts-finance/treasury-desk-rate/search-by-code?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'treasury-desk-rate-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = item.rateNegotiation.code;
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return `${item.rateNegotiation.code} -> ${item.currencySymbol} @ PKR ${item.exchangeRatePkr}`;
            }
        },
        props: {
            labelText: {
                default: 'Search Treasury Rate Negotiation'
            },
            titleFieldName: {
                default: 'rateNegotiationCode'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: ''
            },
            code: {
                default: ""
            },
            id: {
                default: 0
            }
        }
    });

    /**
     * accounts asset search component
     */
    Vue.component( 'asset-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/accounts-finance/assets/search?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'asset-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                item.description = item.description +" ( "+item.location+" ) ";
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.description +" ( "+item.location+" ) ";
            }
        },
        props: {
            labelText: {
                default: 'Search Asset'
            },
            titleFieldName: {
                default: 'title'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: 'description'
            }
        }
    });

    /**
     * accounts tanker  reg search component
     */
    Vue.component( 'tanker-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/accounts-finance/water-consumption?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'tanker-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                item.description = item.registrationNumber;
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.registrationNumber;
            }
        },
        props: {
            labelText: {
                default: 'Search Tanker'
            },
            titleFieldName: {
                default: 'title'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName: {
                default: 'description'
            }
        }
    });

    /**
     * search tags
     */
    Vue.component( 'search-doc-tags', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/admin/uploaded-documents/documents/tags?term=${encodeURIComponent( this.list.term )}`;
                return url;
            },
            getEmittedEventName: function() {
                return 'tag-select';
            },
            setEntity: function( item, event ) {
                event.preventDefault();
                this.entityId = item.id;
                this.entityTwoId = 0;
                this.entityCode = '';
                this.cachedEntity = item;
                this.list.selected = item;
                this.list.term = this.getTitle( item );
                this.closeList();
            },
            getTitle: function( item ) {
                return item.tag;
            }
        },
        props: {
            labelText: {
                default: 'Search Cosmos Machines'
            },
            titleFieldName: {
                default: 'machineTitle'
            },
            idFieldName: {
                default: 'machineSerialNumber'
            },
            codeFieldName: {
                default: ''
            },
            serialNumber: {
                default: ""
            }
        }
    });


    /**
     * local invoice search
     */
    Vue.component( 'local-invoice-search', {
          mixins: [searchComponentMixin],
          props: ['customerId'],
          methods: {
              getSearchUrl: function() {
                  return `/uind/rest/accounts-finance/local/sales-receipt/search-active-invoice/?term=${encodeURIComponent( this.list.term )}&customerId=${encodeURIComponent( this.customerId )}`;
              },
              getEmittedEventName: function() {
                return 'invoice-select';
              },
              getTitle: function( invoice ) {
                return invoice.invoiceNumber + ' (' + invoice.id + ') ' + ' (CUSTOMER-' + invoice.customerId + ')';
              }
          },
          props: {
              labelText: {
                  default: 'Search Invoice'
              },
              titleFieldName: {
                  default: 'searchInvoice'
              },
              idFieldName: {
                  default: 'invoiceId'
              },
              codeFieldName: {
                  default: 'invoiceCode'
              },
              customerId: {
                default: 0
              },

          }
    });



    /*
    * bundle search
    * */
    Vue.component('bundle-search-by-barcode',{
        mixins: [searchComponentMixin],
        methods : {
            getSearchUrl : function () {
                let url = `/ctp/rest/bundles/find-bundle-by-barcode?term=${encodeURIComponent( this.list.term )}`
                return url;
            },
            getEmittedEventName: function() {
                return 'job-card-select';
            },
            getTitle: function( card ) {
                return `(${card.barcode})`;
            }
        },
        props: {
            labelText: {
                default: 'Search By Bundle'
            },
            titleFieldName: {
                default: 'cardTitle'
            },
            idFieldName: {
                default: 'jobCardId'
            },
            codeFieldName : {
                default : 'jobCardCode'
            },
            filter : {
                default : true
            },
            inputMode: {
                default : 'none'
            }
        }
    })




    /*
    * job card search
    * */
    Vue.component('job-card-search',{
        mixins: [searchComponentMixin],
        methods : {
            getSearchUrl : function () {
                let url = `/ctp/rest/job-cards/search?term=${encodeURIComponent( this.list.term )}`
                if( ! this.filter ){
                    url += '&filter=false'
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'job-card-select';
            },
            getTitle: function( card ) {
                return `(${card.code}) - ${card.createdBy}`;
            }
        },
        props: {
            labelText: {
                default: 'Search Job Card'
            },
            titleFieldName: {
                default: 'cardTitle'
            },
            idFieldName: {
                default: 'jobCardId'
            },
            codeFieldName : {
                default : 'jobCardCode'
            },
            filter : {
                default : true
            },
            inputMode: {
                default : 'none'
            }
        }
    })


    /*
    * master bundle search
    * */
    Vue.component('master-bundle-search',{
        mixins: [searchComponentMixin],
        methods : {
            getSearchUrl : function () {
               return `/ctp/rest/bundles/master/search?term=${encodeURIComponent( this.list.term )}&received=${this.received}`
            },
            getEmittedEventName: function() {
                return 'master-bundle-select';
            },
            getTitle: function( card ) {
                return `(${card.id}) - ${card.barcode}`;
            }
        },
        props: {
            labelText: {
                default: 'Search Master Bundle'
            },
            titleFieldName: {
                default: 'bundleTitle'
            },
            idFieldName: {
                default: 'masterBundleId'
            },
            codeFieldName : {
                default : 'masterBundleCode'
            },
            received : {
                default : false
            },
            inputMode: {
                default : 'none'
            }
        }
    })

    /*
    *  stitched offline item
    * */
    Vue.component( 'stitching-offline-item',{
        mixins: [searchComponentMixin],
        methods : {
            getSearchUrl : function () {
                return `/ctp/rest/stitching-offline-items/search?term=${encodeURIComponent( this.list.term )}`
            },
            getEmittedEventName: function() {
                return 'stitching-offline-item-select';
            },
            getTitle: function( item ) {
                return `${item.id}  - ( ${item.barcode} )`;
            }
        },
        props: {
            labelText: {
                default: 'Search Stitching Item'
            },
            titleFieldName: {
                default: 'title'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName : {
                default : 'code'
            },
            inputMode: {
                default : 'none'
            }
        }

    });


    /*
    *  finished item search
    * */
    Vue.component('finished-item-search',{
        mixins: [searchComponentMixin],
        methods : {
            getSearchUrl : function () {
                return `/ctp/rest/finished-items/search?term=${encodeURIComponent( this.list.term )}&is-segregated=${this.isSegregated}`
            },
            getEmittedEventName: function() {
                return 'finished-item-select';
            },
            getTitle: function( item ) {
                return `${item.id}  - ( ${item.barcode} )`;
            }
        },
        props: {
            labelText: {
                default: 'Search Finished Item'
            },
            titleFieldName: {
                default: 'title'
            },
            idFieldName: {
                default: 'id'
            },
            codeFieldName : {
                default : 'code'
            },
            isSegregated : {
                default : false
            },
            inputMode: {
                default : 'none'
            }
        }
    })

    /*
    * bundle search component
    * */
    Vue.component( 'bundle-search',{
        mixins: [searchComponentMixin],
        methods : {
            getSearchUrl : function () {
                return `/ctp/rest/bundles/search?term=${encodeURIComponent( this.list.term )}`
            },
            getEmittedEventName: function() {
                return 'bundle-select';
            },
            getTitle: function( bundle ) {
                return ` ${bundle.barcode} - ${bundle.type} -  ( JC:${bundle.jobCardId} )`;
            }
        },
        props: {
            labelText: {
                default: 'Search Bundle'
            },
            titleFieldName: {
                default: 'bundleTitle'
            },
            idFieldName: {
                default: 'bundleId'
            },
            codeFieldName : {
                default : 'bundleCode'
            },
            inputMode: {
                default : 'none'
            }
        }
    })

    /*
    * tms task search search
    * */
    Vue.component( 'tms-task-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                let url = `/uind/rest/tms/tasks/search?term=${encodeURIComponent( this.list.term )}`;
                if ( !! this.projectId ) {
                    url += `&project-id=${this.projectId}`;
                }
                if ( !! this.currentTaskId ) {
                    url += `&current-task-id=${this.currentTaskId}`;
                }
                return url;
            },
            getEmittedEventName: function() {
                return 'tms-task-select';
            },
            getTitle: function( task ) {
                return `(${task.code}) - ${task.title}`;
            }
        },
        props: {
            labelText: {
                default: 'Search Task'
            },
            titleFieldName: {
                default: 'taskTitle'
            },
            idFieldName: {
                default: 'taskId'
            },
            codeFieldName: {
                default: 'taskCode'
            },
            projectId: {
                default: null
            },
            currentTaskId: {
                default: null
            }
        }
    });

    /**
     * document component
     */
    Vue.component( 'document', {
        props: ['index', 'name'],
        template: `
            <div class="form-row">
                <div class="col-sm-3 form-group">
                    <input type="file" class="form-control-file" v-bind:name="name">
                </div>
            </div>
        `
    });

    /**
     * file input
     */
    Vue.component( 'file-input',
        {
        props: {
            index: {
                default: 0
            },
            nameFieldTitle: {
                default: 'files'
            },
            accepts: {
                default: 'image/png, image/gif, image/jpeg'
            },
            columns: {
                default: 2
            },
            required: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            handleFileRemove: function( index, e ) {
                e.preventDefault();
                this.$emit( 'file-removed', index );
            },

            handleFileChange(e) {
                const file = e.target.files[0];
                this.$emit('file-selected', { file, index: this.index });
            }
        },
        template: `
            <div class="form-row">
                <div class="form-group" v-bind:class="'col-sm-' + columns">
                    <input type="file" 
                           class="form-control-file" 
                           v-bind:accept="accepts" 
                           v-bind:name="nameFieldTitle + '[' + index + ']'"
                           @change="handleFileChange">
                </div>
                <div class="col-sm-1 form-group">
                    <a href="#" class="text-danger font-sm" v-on:click="handleFileRemove( index, $event )">Remove</a>
                </div>
            </div>
        `
    });

    /**
     * file input without indexing
     */
    Vue.component( 'non-idx-file-input',
        {
            props: {
                index: {
                    default: 0
                },
                nameFieldTitle: {
                    default: 'files'
                },
                accepts: {
                    default: 'image/png, image/gif, image/jpeg'
                },
                columns: {
                    default: 2
                }
            },
            methods: {
                handleFileRemove: function( index, e ) {
                    e.preventDefault();
                    this.$emit( 'file-removed', index );
                }
            },
            template: `
            <div class="form-row">
                <div class="form-group" v-bind:class="'col-sm-' + columns">
                    <input type="file" class="form-control-file" v-bind:accept="accepts" v-bind:name="nameFieldTitle">
                </div>
                <div class="col-sm-1 form-group">
                    <a href="#" class="text-danger font-sm" v-on:click="handleFileRemove( index, $event )">Remove</a>
                </div>
            </div>
        `
        });

    /**
     * local sale notification
     */
    Vue.component( 'local-sale-notification', {
            data: function() {
                return {
                    openAlert: false
                }
            },
            props: {
                visible: {
                    default: true
                },
            },
            methods: {
                getNumberOfPendingRequests: function( ) {
                    return window.ctp.pendingApprovalSaleRequests;
                },
                closePendingRequestAlert: function() {
                debugger;
                    openAlert = false;
                },
            },
            template: `
                <div style="position:absolute;bottom:0;right:20px;" class="alert alert-primary d-flex align-items-center" role="alert">

                  <div>
                    you have {{ getNumberOfPendingRequests() }} pending approval sale request
                  </div>
                  <button type="button" class="close" v-on:click="$emit('close-pending-request-alert')"><span>×</span></button>
                </div>
            `,
            mounted: function() {}
        });

    /**
     * dispatch requisition search component
     */
    Vue.component( 'dispatch-requisition-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/uic/dispatch-requisitions/search?term=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'dispatch-requisition-select';
            },
            getTitle: function( po ) {
                return po.code;
            }
        },
        props: {
            labelText: {
                default: 'Search Dispatch Requisition'
            },
            titleFieldName: {
                default: 'dispatchRequisitionTitle'
            },
            idFieldName: {
                default: 'dispatchRequisitionId'
            },
            codeFieldName: {
                default: 'dispatchRequisitionCode'
            }
        }
    });

    /**
     * fps customer search component
     */
    Vue.component( 'fps-customer-search', {
        mixins: [searchComponentMixin],
        methods: {
            getSearchUrl: function() {
                return `/uind/rest/fair-price-shop/customers?title=${encodeURIComponent( this.list.term )}`;
            },
            getEmittedEventName: function() {
                return 'fps-customer-select';
            },
            getTitle: function( customer ) {
                return customer.title;
            }
        },
        props: {
            labelText: {
                default: 'Search Customer'
            },
            titleFieldName: {
                default: 'dispatchRequisitionTitle'
            },
            idFieldName: {
                default: 'customerId'
            },
            codeFieldName: {
                default: 'dispatchRequisitionCode'
            }
        }
    });

}