import { getLabelText } from '/components/common/utils.js?v=3.4'
import VueSelect from "/Components/Common/VueSelect.js?v=3.4"
import InputSearch from "/Components/Common/InputSearch.js?v=3.4"
import InputTextArea from "/Components/Common/InputTextArea.js?v=3.4"
import Pager from "/Components/Common/Pager.js?v=3.4"
import SearchPanel from "/Components/Common/SearchPanelWrapper.js?v=3.4"
import OperationsPanel from "/Components/Common/OperationsPanelWrapper.js?v=3.4"
import ModalPopUp from '/Components/Common/ModalPopUp.js?v=3.4'
import NoRecords from "/Components/Common/NoRecords.js?v=3.4"
import Loading from "/Components/Common/Loading.js?v=3.4"


export default {
    props: {
        //tabIndex: { type: String, required: true },
        readOnly: { type: Boolean, required: true },
        permenantDeleteCustomer: { type: Boolean, required: true },
        showWHMCS: { type: Boolean, required: true },
        isSubReseller: { type: Boolean, required: true },
        showCustomerNumber: { type: Boolean, required: true },
        showExportToExcel: { type: Boolean, required: true },
        showDeleteOption: { type: Boolean, required: true },
        isKeyCloakEnabled: { type: Boolean, required: true },
        sortPreference: { type: Object, required: true },
        isEgyptBenyaTechPlatform: { type: Boolean, required: true }
    },
    components: {
        VueSelect,
        InputSearch,
        InputTextArea,
        Pager,
        SearchPanel,
        OperationsPanel,
        ModalPopUp,
        NoRecords,
        Loading
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            totalRecords: 0,
            customers: [],
            owners: {},
            subresellers: {},
            updateSubreseller: '',
            search: {
                selectedOwner: '',
                selectedSubreseller: '',
                clientId: '',
                customerNo: '',
                name: '',
                email: '',
                companyName: '',
                domainName: '',
                address: '',
                phone: '',
                city: '',
                zipPostalCode: '',
                card4Digit: '',
                notes: '',
                WHMCSId: '',
                pageIndex: 1,
                pageSize: gridPageSize,
                sortExpression: 'ID',
                sortDir: 'Asc',
                updateSorting: false,
                showDeleted: false,
                status: 'GN0000261'
            },
            showClearButton: false,
            deletedOnlyResults: false,

            //***** START: Modal Popup *******
            showModal: false,
            reasonRequired: false,
            cbActionRequired: false,
            reason: '',
            cbAction: false,
            modalTitle: '',
            modalBody: '',
            parentContext: {},  //params to execute callback method related to current operation
            //***** END: Modal Popup *******

            //***** START: Update Subreseller Modal Popup *******
            showSubresellerModal: false,
            SubResellerId: '',
            SubresellermodalTitle: this.getLabelText('strManagedBySubReseller'),
            SubresellermodalBody: '',
            SubresellerparentContext: {},  //params to execute callback method related to current operation
            //***** END: Modal Popup *******
        }
    },
    methods: {
        inputSearchChangeHandler: function (obj) {
            this.search[obj.fieldName] = obj.searchValue;
            this.showClearButton = obj.submit;

            if (obj.submit == true)
                this.doSearch();
        },
        sortBy: function (exp) {
            if (this.search.sortExpression != exp) {
                this.search.sortExpression = exp;
                this.search.sortDir = "Asc";
            }
            else
                this.search.sortDir = this.search.sortDir == "Asc" ? "Desc" : "Asc";

            this.search.updateSorting = true;
            this.doSearch();
        },
        checkAll: function (checked) {
            this.customers.map(obj => obj.IsItemSelected = checked);
        },
        showActionButton: function () {
            return this.customers.find(obj => obj.IsItemSelected);
        },
        checkAllChecked: function () {
            return !this.customers.find(obj => !obj.IsItemSelected);
        },
        ownerChangeHandler: async function (obj) {

            this.search.selectedOwner = obj.selectedValue;
            setOwnerCookie(obj.selectedValue);

            if (this.subresellers.show) {
                await this.listSubResellers();
            }

        },
        subresellerChangeHandler: function (obj) {
            this.search.selectedSubreseller = obj.selectedValue;
        },
        updateSubresellerChangeHandler: function (obj) {
            this.updateSubreseller = obj.selectedValue;
        },
        listCustomers: async function () {

            var vm = this;
            vm.isLoading = true;
            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            await fetch("/RCC/Clients/ClientsList.aspx/GetClientsList", postRequest)
                .then(response => response.json()).then((data) => {

                    vm.search.updateSorting = false;
                    vm.customers = JSON.parse(data.d);

                    if (vm.customers.length > 0) {
                        vm.totalRecords = vm.customers[0].Counter;
                        vm.customers.map(obj => ({ ...obj, IsItemSelected: false }));
                    }
                    vm.isLoading = false;
                });

        },
        listOwners: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/GetOwners", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.owners = JSON.parse(data.d);
                    this.search.selectedOwner = this.owners.initialValue;

                })
            //.catch(function (e) {
            //    displayErrorMsg(e);
            //});

        },
        listSubResellers: async function () {

            var vm = this;

            await fetch("/webservices/machpanelservice.asmx/GetSubResellers?CompanyId=" + vm.search.selectedOwner, fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.subresellers = JSON.parse(data.d);
                    this.search.selectedSubreseller = this.subresellers.initialValue;

                })
            //.catch(function (e) {
            //    displayErrorMsg(e);
            //});
        },
        doClearSearch: async function () {

            if (this.subresellers.show) {
                await this.listSubResellers();
            }

            this.search.selectedSubreseller = this.subresellers.initialValue;
            this.search.clientId = '';
            this.search.customerNo = '';
            this.search.name = '';
            this.search.email = '';
            this.search.companyName = '';
            this.search.domainName = '';
            this.search.address = '';
            this.search.phone = '';
            this.search.city = '';
            this.search.zipPostalCode = '';
            this.search.card4Digit = '';
            this.search.notes = '';
            this.search.WHMCSId = '';
            this.search.pageIndex = 1;

            this.search.showDeleted = false;
            this.deletedOnlyResults = false;
            this.search.status = 'GN0000261';

            updateSelectInterface();    //Required to update SOL control in case of html select.
            this.doSearch();

        },
        doSearch: function () {
            clearAllMsgs();
            var vm = this;
            this.listCustomers().catch(function (e) {
                vm.customers = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });

            this.deletedOnlyResults = this.search.showDeleted;
        },
        importCustomerTab: function () {

            window.open("/RCC/Clients/ImportCustomers.aspx", "_blank");
            //    var path = "~/Clients/ImportCustomers.aspx";
            //     router.push({ path: 'ImportCustomers' });

        },
        newCustomer: function () {

            if (this.isSubReseller)
                window.open("/RCC/Clients/ServiceSubscription.aspx", "_blank");
            else
                window.open("/RCC/Clients/ServiceSubscription.aspx?NC=n", "_blank");

        },
        exportToExcel: function () {
            var vm = this;

            let postRequest = { ...fetchPost };
            postRequest.body = JSON.stringify(vm.search);

            fetch("/RCC/Clients/ClientsList.aspx/ExportToExcel", postRequest)
                .then(response => response.json()).then((data) => {
                    if (data && data.d && data.d != '')
                        window.open('/DownloadHandler.ashx', "_blank");
                    // console.log(data.d);
                })
                .catch(function (e) {
                    displayErrorMsg(e);
                });

        },
        loginToPlesk: function (e) {
            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            let cId = e.target.dataset.id;

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': cId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/PCC/Reseller/List.aspx/LoginToPlesk", postRequest)
                .then(response => response.json()).then((data) => {

                    if (data.d.ResponseCode == "RedirectURL")
                        window.location.href = data.d.Value;

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        loginToCP: function (customerid) {
            var param = "{'pg':" + '' + ",'CustomerId':" + customerid + "}";
            this.$http.post("/webservices/machpanelservice.asmx/LoginToCP", param,
                { "headers": { "content-type": "application/json" } });
        },
        subscribeService: function (customerid) {
            window.open("/RCC/Clients/ServiceSubscription.aspx?CID=" & customerid & "&Sub=Ex", "_blank");
        },
        confirmActionRemove: function (e) {

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            //CustomerId, OwnerId, Name, SubsCount, UserCount
            let cId = e.target.dataset.id;
            let oId = e.target.dataset.ownerid;
            let Name = e.target.dataset.name;
            let SubsCount = e.target.dataset.subscount;
            let UserCount = e.target.dataset.usercount;

            this.parentContext = { cId: cId, oId: oId, op: "remove" };

            if (confirm(this.getLabelText('DEV1009').replace("a customer", "a customer " + Name).replace("$SubscriptionsCount$", SubsCount).replace("$CustomersCount$", UserCount)))
                this.removeCustomer(this.parentContext);

        },
        removeCustomer: function (obj) {

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': obj.cId,
                'OwnerId': obj.oId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/RCC/Clients/ClientsList.aspx/RemoveCustomer", postRequest)
                .then(response => response.json()).then((data) => {

                    if (data.d == 'true') {
                        this.doSearch();
                        displaySuccessMsg(this.getLabelText('EGN0000011'));
                    }

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        confirmActionRemovePermenant: function (e) {

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            //CustomerId, OwnerId, Name, SubsCount, UserCount
            let cId = e.target.dataset.id;
            let oId = e.target.dataset.ownerid;
            let Name = e.target.dataset.name;

            this.parentContext = { cId: cId, oId: oId, op: "remove" };

            if (confirm(this.getLabelText('SPT002037')))
                this.removeCustomerPermenant(this.parentContext);

        },
        removeCustomerPermenant: function (obj) {

            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': obj.cId,
                'OwnerId': obj.oId
            };

            postRequest.body = JSON.stringify(param);

            fetch("/RCC/Clients/ClientsList.aspx/RemoveCustomerPermenantly", postRequest)
                .then(response => response.json()).then((data) => {

                    //if (data.d == 'true') {
                    this.doSearch();
                    displaySuccessMsg(this.getLabelText('EGN0000011'));
                    //}

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        mpModelEventHandler: function (obj) {

            if (obj.submit == true) {
                if (this.reasonRequired && this.reason == '') {
                    //$('#txtreason').parent().addClass('validation-failed');
                    //$('#txtreason').focus();

                    alert(this.getLabelText('ReasonIsRequired'));
                    this.showModal = true;
                    $('#' + obj.id).modal('show');

                    return;
                }

                if (obj.parentContext.op == "remove")
                    this.removeCustomer(obj);
                else if (obj.parentContext.op == "resume" || obj.parentContext.op == "suspend")
                    this.suspendResumeCustomer(obj);
            }

            this.showModal = false;
        },
        confirmActionSuspendResume: function (e) {

            // Get the value of the disabled attribute
            const disabledValue = e.target.getAttribute('disabled');

            if (disabledValue === 'true' || disabledValue === true)
                return false;

            //CustomerId, OwnerId, Name, SubsCount, UserCount
            let cId = e.target.dataset.id;
            let CustomerIsSuspend = e.target.dataset.status;
            this.reason = '';
            this.showModal = true;
            this.parentContext = { cId: cId, op: (CustomerIsSuspend ? "resume" : "suspend") };
            this.reasonRequired = true;

            if (this.parentContext.op == "suspend") { //Resume case
                this.cbActionRequired = true;
            }

            this.modalTitle = this.getLabelText('SMI0280');

        },
        suspendResumeCustomer: function (obj) {
            //console.log(obj);
            console.log(obj.reason);
            console.log(obj.parentContext.reason);
            let postRequest = { ...fetchPost };
            var param = {
                'CustomerId': obj.parentContext.cId,
                'Comments': this.reason,
                'IsSuspendRequest': (obj.parentContext.op == "suspend" ? true : false),
                'chbxSuspendCustomersTo': false
            };

            postRequest.body = JSON.stringify(param);

            fetch("/RCC/Clients/ClientsList.aspx/SuspendResumeReseller", postRequest)
                .then(response => response.json()).then((data) => {

                    if (data.d == true || data.d == 'true') {
                        this.doSearch();
                        displaySuccessMsg(this.getLabelText('EGN0000011'));
                    }

                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        ShowUpdateSubresellerModel: function (e) {


            //CustomerId, OwnerId, Name, SubsCount, UserCount
            //let cId = e.target.dataset.id;
            //let CustomerIsSuspend = e.target.dataset.status;

            this.showSubresellerModal = true;

            this.modalTitle = this.getLabelText('strManagedBySubReseller');

        },
        updateCustomersSubreseller: function () {
            let selectedRecords = this.customers.filter(a => a.IsItemSelected);

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                // alert(this.getLabelText('strPleaseSelectOrganization'));
            }
            else {
                let postRequest = { ...fetchPost };
                var param = {
                    'customerIds': selectedRecords.map(item => item.CustomerId).join(),
                    'customerAndCompIds': selectedRecords.map(item => item.CustomerId + '|' + item.CompanyId).join(),
                    'selectedSubReseller': this.updateSubreseller
                };

                postRequest.body = JSON.stringify(param);

                fetch("/RCC/Clients/ClientsList.aspx/AssignSubResellerToCustomers", postRequest)
                    .then(response => response.json()).then((data) => {
                        displaySuccessMsg(data.d);
                        //if (data.d == 'true') {
                        //    this.doSearch();
                        //    displaySuccessMsg(this.getLabelText('EGN0000011'));
                        //}

                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
            this.showSubresellerModal = false;
        },
        cancelUpdateSubreseller: function () {


            //CustomerId, OwnerId, Name, SubsCount, UserCount
            //let cId = e.target.dataset.id;
            //let CustomerIsSuspend = e.target.dataset.status;

            this.showSubresellerModal = false;

        },
        getLabelText,
        handleGlobalSearch: function () {
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            var searchQueryType = '';
            var searchQueryValue = '';

            for (var i = 0; i < hashes.length; i++) {
                var hash = hashes[i].split('=');
                if (hash[0].toLowerCase() == 'op') {
                    searchQueryType = hash[1];
                }
                else if (hash[0].toLowerCase() == 'val') {
                    searchQueryValue = decodeURI(hash[1]);
                }
            }

            if (searchQueryType != '' && searchQueryValue != '') {
                if (searchQueryType == 'C1')
                    this.search.name = searchQueryValue;
                else if (searchQueryType == 'C2')
                    this.search.email = searchQueryValue;
                else if (searchQueryType == 'C3')
                    this.search.domainName = searchQueryValue;
                else if (searchQueryType == 'C4')
                    this.search.companyName = searchQueryValue;
                else if (searchQueryType == 'C5')
                    this.search.clientId = searchQueryValue;
                else if (searchQueryType == 'C6')
                    this.search.address = searchQueryValue;
                //else if (searchQueryType == 'C7')
                //    this.search.phone = searchQueryValue;
                else if (searchQueryType == 'C8')
                    this.search.phone = searchQueryValue;
                else if (searchQueryType == 'C9')
                    this.search.card4Digit = searchQueryValue;
                else if (searchQueryType == 'C10')
                    this.search.notes = searchQueryValue;
                else if (searchQueryType == 'C11')
                    this.search.city = searchQueryValue;
                else if (searchQueryType == 'C12')
                    this.search.zipPostalCode = searchQueryValue;
                else if (searchQueryType == 'C13')
                    this.search.customerNo = searchQueryValue;
            }
        },
        pagerChangeHandler: function (o) {
            this.search.pageIndex = o.pageIndex;
            this.search.pageSize = o.pageSize;
            this.doSearch();
        }
    },
    created: async function () {

        this.search.sortDir = this.sortPreference.SortDirection;
        this.search.sortExpression = this.sortPreference.SortExpression;

        var vm = this;
        vm.isLoading = true;
        await this.listOwners().then(this.listSubResellers).then(async () => { vm.handleGlobalSearch(); await vm.listCustomers(); }).catch(function (e) {
            vm.customers = [];
            vm.totalRecords = 0;
            vm.isLoading = false;
            displayErrorMsg(e);

            // alert(e);
        });

    },
    template: ` 
        <div class="col-xs-12">
            <div class="card">
                <div class="body">
                    <div class="row">

                        <ModalPopUp v-if="showModal" :parentContext="parentContext" :modalTitle="modalTitle" @onYes="mpModelEventHandler" @onNo="mpModelEventHandler"
                            :yesButtonText="getLabelText('strYes')" :noButtonText="getLabelText('strNo')">

                            <div class="row" v-if="reasonRequired">
                                <div class="col-sm-3 col-xs-12 row-label">
                                    <label>{{ getLabelText('GN0000805') + ':' }}</label>
                                </div>
                                <div class="col-sm-9 col-xs-12">
                                    <InputTextArea id="txtreason" v-model:fieldValue="reason" fieldRows="5"  />
                                </div>
                            </div>

                        </ModalPopUp>

                        <ModalPopUp v-if="showSubresellerModal" :parentContext="SubresellerparentContext" :modalTitle="SubresellermodalTitle" @onYes="updateCustomersSubreseller" @onNo="mpModelEventHandler"
                            :yesButtonText="getLabelText('DGN1110422')" :noButtonText="getLabelText('GN0000572')">                        

                            <div class="row">
                                <div class="col-sm-3 col-xs-12 row-label">
                                    <label>{{ getLabelText('strManagedBySubReseller') + ':' }}</label>
                                </div>
                                <div class="col-sm-6 col-xs-12">
                                    <div class="form-label-group">                                       
                                        <div class="form-group form-float">
                                            <VueSelect :options="subresellers.items" :selectedValue="this.updateSubreseller" @selectchange="updateSubresellerChangeHandler" />
                                        </div>                                        
                                    </div>
                                </div>
                            </div>

                        </ModalPopUp>

                        <OperationsPanel>
                            <button id="Btn_Subscribe" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && !isEgyptBenyaTechPlatform" @click.prevent="newCustomer();">{{getLabelText("SPT002333")}}</button>
                            <button id="Btn_ExportExcel" class="btn btn-primary waves-effect" v-if="showExportToExcel" @click.prevent="exportToExcel()">{{getLabelText("Ex001")}}</button>
                            <button id="Btn_CustomersImport" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && !isEgyptBenyaTechPlatform" @click="importCustomerTab();">{{getLabelText("Spt002854")}}</button>
                            <button id="btnUpdateSubReseller" class="btn btn-primary waves-effect btnAction" v-if="!readOnly && !isEgyptBenyaTechPlatform" v-show="showActionButton()" @click.prevent="ShowUpdateSubresellerModel();">{{getLabelText("strUpdateSubReseller")}}</button>
                        </OperationsPanel>

                        <SearchPanel id='customer-list' :showClearButton="showClearButton" @onSearch='doSearch' @onClear='doClearSearch'>
                            <div :class="searchContainerDivClass" v-if="owners.show">
                                <div class="form-group form-float">
                                    <VueSelect :options="owners.items" :selectedValue="this.search.selectedOwner" @selectchange="ownerChangeHandler" />
                                </div>
                            </div>

                            <InputSearch fieldDataType="number" :searchValue="search.clientId" fieldName="clientId" :fieldLabel="getLabelText('GN0000678')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.customerNo" fieldName="customerNo" :fieldLabel="getLabelText('CustomerNumber')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.name" fieldName="name" :fieldLabel="getLabelText('GN000170')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.email" fieldName="email" :fieldLabel="getLabelText('GN0000652')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.companyName" fieldName="companyName" :fieldLabel="getLabelText('GN00001077')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.domainName" fieldName="domainName" :fieldLabel="getLabelText('GN000125')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.WHMCSId" fieldName="WHMCSId" fieldDataType="Number" v-if="showWHMCS" :fieldLabel="getLabelText('USM0159')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.address" fieldName="address" :fieldLabel="getLabelText('GN00001493')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.phone" fieldName="phone" :fieldLabel="getLabelText('GN00012')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.city" fieldName="city" :fieldLabel="getLabelText('GN0000880')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.zipPostalCode" fieldName="zipPostalCode" :fieldLabel="getLabelText('GN00001522')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                            <InputSearch :searchValue="search.card4Digit" fieldName="card4Digit" fieldDataType="Number" :fieldLabel="getLabelText('String126')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />
                            <InputSearch :searchValue="search.notes" fieldName="notes" :fieldLabel="getLabelText('GN00001336')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" /> 
                                                                                  
                            <div :class="searchContainerDivClass" v-if="subresellers.show">
                                <div class="form-group form-float">
                                    <VueSelect :options="subresellers.items" :selectedValue="this.search.selectedSubreseller" @selectchange="subresellerChangeHandler" />
                                </div>
                            </div>

                            <div :class="searchContainerDivClass">
                                <div class="form-group form-float">
                                    <select v-model="search.status" class="vue-select">
                                        <option value="GN0000261">{{getLabelText("SelectStatus")}}</option>
                                        <option value="GN0000222">{{getLabelText("GN0000222")}}</option>
                                        <option value="GN0000345">{{getLabelText("GN0000345")}}</option>
                                        <option value="GN0000349">{{getLabelText("GN0000349")}}</option>
                                        <option value="String383">{{getLabelText("String383")}}</option>
                                    </select>
                                </div>
                            </div>

                            <div :class="searchContainerDivClass" v-if="!permenantDeleteCustomer">
                                <label for="showDeleted" class="checkbox-inline">
                                    <input type="checkbox" id="showDeleted" v-model="search.showDeleted" />{{getLabelText('ShowDeleted')}}
                                </label>
                            </div>

                        </SearchPanel>
                        <div class="col-xs-12" v-if="isLoading">
                            <Loading/>
                        </div>
                        <div class="col-xs-12" v-else>
                            <table class="table table-bordered table-striped table-hover" v-if="customers.length >0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center" v-if="!(readOnly || isSubReseller || isEgyptBenyaTechPlatform)">
                                            <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            <label for="CheckAll"></label>
                                        </th>
                                        <th class="col-xs-1">{{getLabelText("String385")}}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('ID')">{{getLabelText("GN0000678")}}</a></th>
                                        <th class="col-xs-1" v-if="showWHMCS">{{getLabelText("USM0159")}}</th>
                                        <th class="col-xs-1" v-if="showCustomerNumber"><a href="#" @click.prevent="sortBy('CustomerNumber')">{{getLabelText("GN000924")}}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('Name')">{{getLabelText("GN000170")}}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustCompanyName')">{{getLabelText("GN00001077")}}</a></th>
                                        <th class="col-xs-2" v-if="owners.show" ><a href="#" @click.prevent="sortBy('CompanyName')">{{getLabelText("SPT002811")}}</a></th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{getLabelText("GN0000360")}}</th>
                                    </tr>
                                    <tr v-for="customer in customers">

                                        <td class="align-center" v-if="!(readOnly || isSubReseller  || isEgyptBenyaTechPlatform)">
                                            <input type="checkbox" v-bind:id="customer.CustomerId" v-model="customer.IsItemSelected" />
                                            <label v-bind:for="customer.CustomerId"></label>
                                        </td>

                                        <td  v-if="!customer.StillCustomer && customer.DeleteJobExists">{{getLabelText("String383")}}</td>
                                        <td  v-else-if="!customer.StillCustomer && !customer.DeleteJobExists">{{getLabelText("GN0000302")}}</td>
                                        <td  v-else-if="customer.StillCustomer && customer.IsSuspend">{{getLabelText("GN00001379")}}</td>
                                        <td  v-else-if="customer.StillCustomer && customer.IsFraud">{{getLabelText("GN0000349")}}</td>
                                        <td  v-else-if="customer.StillCustomer && customer.CustomerIdOfOwner !='0' && customer.ResellerIsSuspend">{{getLabelText("strOwnerSuspended")}}</td>
                                        <td  v-else>{{getLabelText("GN0000222")}}</td>

                                        <td><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID='+customer.CustomerId+'&Src=C'">{{customer.CustomerId}} </a></td>
                                     
                                        <td  v-if="showWHMCS">{{customer.WHMCS_UserId}} </td>
                                        <td  v-if="showCustomerNumber">{{customer.CustomerNumber}} </td>
                                        <td >{{customer.FirstName}} {{customer.LastName}} </td>
                                        <td >{{customer.CustCompanyName}} </td>
                                        <td  v-if="owners.show && customer.CustomerIdOfOwner == 0" v-bind:class="[{'disabled':(customer.CustomerIdOfOwner==0)}, '']">{{customer.CompanyName}} </td>
                                        <td  v-else-if="owners.show && customer.CustomerIdOfOwner!=0"><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID='+customer.CustomerIdOfOwner+'&Src=C'">{{customer.CompanyName}}</a> </td>
                                        <td class="align-center" v-if="!readOnly">
                                     
                                            <ul class="option-menu Div_OpsRow">
                                                <li class="dropdown">
                                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                        <i class="material-icons">menu</i>
                                                    </a>
                                                     <ul class="dropdown-menu pull-right" id="UL_OptionMenu" v-show="!deletedOnlyResults">
                                                        <li v-if="!isKeyCloakEnabled">                                                              
                                                            <a v-bind:href="'/RCC/Clients/ClientsList.aspx?AL=' + customer.CustomerId" v-bind:class="[{'disabled':(!customer.StillCustomer || customer.IsSuspend || customer.IsFraud)}, 'btnAction waves-effect waves-block']">{{ getLabelText('GN0001248') }}</a>
                                                        </li>                                                        
                                                            <li v-if="customer.StillCustomer && !customer.IsSuspend && !customer.IsFraud && customer.PleskInfo != ''">
                                                            <a @click="loginToPlesk" :data-id="customer.CustomerId" class="btnAction waves-effect waves-block">{{getLabelText("LoginPlesk")}}</a>
                                                        </li>
                                                       
                                                        <li v-if="customer.StillCustomer && !customer.IsSuspend && !customer.IsFraud && customer.PleskInfo != ''">
                                                            <a v-bind:href="'/RCC/Clients/ResetPleskPassword.aspx?Mode=2&CID=' + customer.CustomerId" class="btnAction waves-effect waves-block">{{getLabelText("ChangePleskPassword")}}</a>
                                                        </li>
                                                        <li v-if="customer.StillCustomer && !customer.IsSuspend && !customer.IsFraud">
                                                            <a v-bind:href="'/RCC/Clients/ServiceSubscription.aspx?CID='+customer.CustomerId+'&Sub=Ex'" class="btnAction waves-effect waves-block">{{getLabelText("String276")}}</a> 
                                                         </li>
                                                        
                                                            <li>
                                                            <a @click="confirmActionSuspendResume" :data-id="customer.CustomerId" :data-status="customer.IsSuspend" v-bind:class="[{'disabled':(!customer.StillCustomer)}, 'btnAction waves-effect waves-block']" v-if="customer.IsSuspend">{{ getLabelText('GN0000807') }}</a>
                                                            <a @click="confirmActionSuspendResume" :data-id="customer.CustomerId" :data-status="customer.IsSuspend" v-bind:class="[{'disabled':(!customer.StillCustomer)}, 'btnAction waves-effect waves-block']" v-else>{{ getLabelText('DGN1110276') }}</a>
                                                        </li>
                                                        
                                                        <li v-if="showDeleteOption && !isEgyptBenyaTechPlatform">
                            
                                                            <a @click="confirmActionRemove" :data-id="customer.CustomerId" :data-ownerid="customer.OwnerId"
                                                                :data-name="customer.Name" :data-subscount="customer.SubsCount" v-bind:class="[{'disabled':(!customer.StillCustomer)}, 'btnAction waves-effect waves-block']">{{ getLabelText('GN0000377') }}</a>
                                                        </li>
                                                         
                                                    </ul>  
                                                    <ul class="dropdown-menu pull-right" id="UL_OptionMenuDeletedUsers" v-if="deletedOnlyResults && !isEgyptBenyaTechPlatform">
                                                        <li>
                                                            <a ID="Lbtn_PermenantDelete" @click="confirmActionRemovePermenant" :data-id="customer.CustomerId" :data-ownerid="customer.OwnerId"
                                                                :data-name="customer.Name" class="btnAction">{{ getLabelText('strPermenantDelete') }}</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>

                                        </td>
                                    </tr>
                                  <Pager :totalRecords="totalRecords" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>
                            <NoRecords v-else/>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
`
}

