import VueSelect from '/Components/Common/VueSelect.js?v=3.9'
import InputSearch from '/Components/Common/InputSearch.js?v=3.9'
import SearchPanel from '/Components/Common/SearchPanelWrapper.js?v=3.9'
import OperationsPanel from '/Components/Common/OperationsPanelWrapper.js?v=3.9'
import Pager from '/Components/Common/Pager.js?v=3.9'
import NoRecords from '/Components/Common/NoRecords.js?v=3.9'
import TabContainer from '/Components/Common/TabContainer.js?v=3.9'
import { getLabelText, sleep } from '/Components/Common/utils.js?v=3.9'
import Loading from "/Components/Common/Loading.js?v=3.9"

export default {
    props: {
        readOnly: { type: Boolean, required: true },
        pageTheme: { type: String, required: true },
        isLoggedInAsCustomer: { type: Boolean, required: true },
        sortPreference: { type: Object, required: true }
    },
    components: {
        SearchPanel,
        OperationsPanel,
        Pager,
        NoRecords,
        VueSelect,
        InputSearch,
        TabContainer,
        Loading,
        sleep
    },
    data() {
        return {
            isLoading: true,
            searchContainerDivClass: "col-md-3 col-sm-6 col-xs-12",
            owners: {},
            departments: {},
            departmentsC: {},
            statuses: {},
            agents: {},
            recordsActive: [],
            recordsClosed: [],
            recordsWaiting: [],
            recordsOthers: [],
            recordsDeleted: [],
            search: {
                selectedOwner: '',
                selectedDepartment: '-1',
                selectedField: '-1',
                searchString: '',

                pageIndex: 1,
                pageSize: gridPageSize,
                sortExpression: 'TicketId',
                sortDir: 'Desc',
                updateSorting: false
            },
            showClearButton: false,
            selectedTimeOut: '8',
            selectedStatus: '-1',
            selectedOptions: '-1',
            selectedCDepartment: '-1',
            selectedAssignTo: '-1',

            activeCount: 0,
            waitingCount: 0,
            closedCount: 0,
            otherssCount: 0,
            deletedCount: 0,
            currentTab: 0,
            tabPanels: [],
            showTabPanels: true,
            //tabPanels: [{ text: this.getLabelText('GN0000222') + '[' + this.activeCount + ']', enabled: true, hideTabs: [] },
            //    { text: this.getLabelText('GN0000413') + '[' + this.waitingCount + ']', enabled: true, hideTabs: [] },
            //    { text: this.getLabelText('GN0000414') + '[' + this.closedCount + ']', enabled: true, hideTabs: [] },
            //    { text: this.getLabelText('SM400021') + '[' + this.othersCount + ']', enabled: true, hideTabs: [] },
            //    { text: this.getLabelText('GN0000302'), enabled: true, hideTabs: [] }],
            timeoutOptions: [
                { text: getLabelText('GN0000402'), value: "4" },
                { text: getLabelText('GN0000403'), value: "8" },
                { text: getLabelText('GN0000404'), value: "12" },
                { text: getLabelText('GN0000405'), value: "16" },
                { text: getLabelText('GN0000406'), value: "20" },
                { text: getLabelText('GN0000407'), value: "24" },
                { text: getLabelText('GN0000408'), value: "28" },
                { text: getLabelText('GN0000409'), value: "32" },
                { text: getLabelText('GN0000410'), value: "36" },
                { text: getLabelText('GN0000411'), value: "40" }
            ]
        }
    },
    methods: {
        inputSearchChangeHandler: function (obj) {
            this.search[obj.fieldName] = obj.searchValue;
            this.showClearButton = obj.submit;

            if (obj.submit == true)
                this.doSearch();
        },
        getLabelText,
        activeTabChanged: function (newTabIndex) {
            //this.doClearSearch();

            this.currentTab = vueActiveTabChanged(newTabIndex, this.currentTab, this.tabPanels);
        },
        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 != '') {
                this.search.searchString = searchQueryValue;
                if (searchQueryType == 'H1')
                    this.search.selectedField = '0';
                else if (searchQueryType == 'H2')
                    this.search.selectedField = '1';
                else if (searchQueryType == 'H3')
                    this.search.selectedField = '2';
                else if (searchQueryType == 'H4')
                    this.search.selectedField = '3';
            }
        },
        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();
        },
        timeoutChangeHandler: function (e) {
            this.selectedTimeOut = e.selectedValue;
            //alert(e.target.id);
            UpdateTimer(e.id);
        },
        ownerChangeHandler: async function (obj) {

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

            await this.listDepartments();
            await this.listCDepartments();
            await this.listStatuses();
            await this.listAgents();

            this.handleGlobalSearch();
            await this.listRecords();
        },
        departmentChangeHandler: function (obj) {
            this.search.selectedDepartment = obj.selectedValue;
        },
        cdepartmentChangeHandler: function (obj) {
            this.selectedCDepartment = obj.selectedValue;

            var vm = this;
            this.listAgents();

        },
        assignToChangeHandler: function (obj) {
            this.selectedAssignTo = obj.selectedValue;

        },
        statusChangeHandler: function (obj) {
            this.selectedStatus = obj.selectedValue;
        },
        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);
                    vm.search.selectedOwner = vm.owners.initialValue;

                });

        },
        listDepartments: async function () {

            var vm = this;

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/FillDepartments?CompanyId=" + vm.search.selectedOwner + "&AllOption=true", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.departments = JSON.parse(data.d);
                    vm.search.selectedDepartment = vm.departments.initialValue;

                });
        },
        listCDepartments: async function () {

            var vm = this;

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/FillDepartments?CompanyId=" + vm.search.selectedOwner + "&AllOption=false", fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.departmentsC = JSON.parse(data.d);
                    vm.selectedCDepartment = vm.departmentsC.initialValue;

                });
        },
        fillTicketsCount: async function () {

            var vm = this;

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/FillTicketsCount?cId=" + vm.search.selectedOwner + "&dId=" + vm.search.selectedDepartment, fetchGet)
                .then(response => response.json()).then((data) => {

                    let counters = JSON.parse(data.d);

                    this.activeCount = counters[0].ActiveCount;
                    this.waitingCount = counters[0].WaitingCount;
                    this.closedCount = counters[0].ClosedCount;
                    this.othersCount = counters[0].OthersCount;
                    this.deletedCount = counters[0].DeletedCount;

                });

            this.initTabPanelArray();

        },
        listStatuses: async function () {

            var vm = this;

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/FillStatuses?CompanyId=" + vm.search.selectedOwner, fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.statuses = JSON.parse(data.d);
                    vm.selectedStatus = vm.statuses.initialValue;

                });

        },
        listAgents: async function () {

            var vm = this;

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/FillAgents?CompanyId=" + vm.search.selectedOwner + "&DeptId=" + vm.selectedCDepartment, fetchGet)
                .then(response => response.json()).then((data) => {

                    vm.agents = JSON.parse(data.d);
                    vm.selectedAssignTo = vm.agents.initialValue;

                });

        },
        listRecords: async function () {
            var vm = this;
            vm.isLoading = true;

            await this.listActiveRecords();
            await this.listClosedRecords();
            await this.listWaitingRecords();
            await this.listOtherRecords();
            await this.listDeletedRecords();

            this.initTabPanelArray();

            vm.isLoading = false;
            //console.log('listRecords');
        },
        listActiveRecords: async function () {

            var vm = this;

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

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/GetActiveTickets", postRequest)
                .then(response => response.json()).then((data) => {

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

                    if (vm.recordsActive.length > 0)
                        vm.activeCount = vm.recordsActive[0].Counter;
                    else
                        vm.activeCount = 0;

                    vm.recordsActive.map(obj => ({ ...obj, IsItemSelected: false }));
                });

        },
        listClosedRecords: async function () {

            var vm = this;

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

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/GetClosedTickets", postRequest)
                .then(response => response.json()).then((data) => {

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

                    if (vm.recordsClosed.length > 0)
                        vm.closedCount = vm.recordsClosed[0].Counter;
                    else
                        vm.closedCount = 0;

                    vm.recordsClosed.map(obj => ({ ...obj, IsItemSelected: false }));
                });

        },
        listWaitingRecords: async function () {

            var vm = this;

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

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/GetWaitingTickets", postRequest)
                .then(response => response.json()).then((data) => {

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

                    if (vm.recordsWaiting.length > 0)
                        vm.waitingCount = vm.recordsWaiting[0].Counter;
                    else
                        vm.waitingCount = 0;

                    vm.recordsWaiting.map(obj => ({ ...obj, IsItemSelected: false }));
                });

        },
        listOtherRecords: async function () {

            var vm = this;

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

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/GetOthersTickets", postRequest)
                .then(response => response.json()).then((data) => {

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

                    if (vm.recordsOthers.length > 0)
                        vm.othersCount = vm.recordsOthers[0].Counter;
                    else
                        vm.othersCount = 0;

                    vm.recordsOthers.map(obj => ({ ...obj, IsItemSelected: false }));
                });

        },
        listDeletedRecords: async function () {

            var vm = this;

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

            await fetch("/RCC/HelpDesk/ViewTickets.aspx/GetDeletedTickets", postRequest)
                .then(response => response.json()).then((data) => {

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

                    if (vm.recordsDeleted.length > 0)
                        vm.deletedCount = vm.recordsDeleted[0].Counter;
                    else
                        vm.deletedCount = 0;

                    vm.recordsDeleted.map(obj => ({ ...obj, IsItemSelected: false }));
                });

        },
        confirmRemove: 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 tId = e.target.dataset.id;
            let op = e.target.dataset.op;
            let cId = e.target.dataset.compid;

            if (confirm('Are you sure you want to ' + (op == 'delete' ? 'delete' : 'restore') + ' the ticket?'))
                this.removeRecord(tId, op, cId);
        },
        removeRecord: function (Id, op, cId) {
            var vm = this;

            let postRequest = { ...fetchPost };
            let params = {
                'Id': Id,
                'tabIndex': this.currentTab,
                'op': op,
                'compId': cId
            };
            postRequest.body = JSON.stringify(params);

            fetch("/RCC/HelpDesk/ViewTickets.aspx/RemoveTickets", postRequest)
                .then(response => response.json()).then((data) => {
                    vm.doSearch();
                    displaySuccessMsg(data.d);
                }).catch(function (e) {
                    displayErrorMsg(e);
                });
        },
        changeTickets: function () {
            let selectedRecords = [];
            let vm = this;

            if (this.currentTab == 0)
                selectedRecords = this.recordsActive.filter(a => a.IsItemSelected);
            else if (this.currentTab == 1)
                selectedRecords = this.recordsWaiting.filter(a => a.IsItemSelected);
            else if (this.currentTab == 2)
                selectedRecords = this.recordsClosed.filter(a => a.IsItemSelected);
            else if (this.currentTab == 3)
                selectedRecords = this.recordsOthers.filter(a => a.IsItemSelected);
            else if (this.currentTab == 4)
                selectedRecords = this.recordsDeleted.filter(a => a.IsItemSelected);

            if (selectedRecords == null || selectedRecords == undefined || selectedRecords.length <= 0) {
                alert(this.getLabelText('Please select tickets.'));
            }
            else {
                let postRequest = { ...fetchPost };
                let params = {
                    data: {

                        selectedItems: selectedRecords.map(it => ({
                            "TicketId": it.TicketId,
                            "SenderEmail": it.SenderEmail
                        }))
                    },
                    'tabIndex': this.currentTab,
                    'selectedOwner': this.search.selectedOwner,
                    'selectedOptions': this.selectedOptions,
                    'selectedStatus': this.selectedStatus,
                    'selectedCDepartment': this.selectedCDepartment,
                    'selectedAssignTo': this.selectedAssignTo
                };
                postRequest.body = JSON.stringify(params);

                fetch("/RCC/HelpDesk/ViewTickets.aspx/ChangeTickets", postRequest)
                    .then(response => response.json()).then((data) => {

                        vm.selectedCDepartment = '-1';
                        vm.selectedOptions = '-1';
                        vm.selectedAssignTo = '-1';
                        vm.selectedStatus = '-1';
                        vm.doSearch();
                        displaySuccessMsg(data.d);
                    }).catch(function (e) {
                        displayErrorMsg(e);
                    });
            }
        },
        checkAll: function (checked) {
            if (this.currentTab == 0)
                this.recordsActive.map(record => { record.IsItemSelected = checked });
            else if (this.currentTab == 1)
                this.recordsWaiting.map(record => { record.IsItemSelected = checked });
            else if (this.currentTab == 2)
                this.recordsClosed.map(record => { record.IsItemSelected = checked });
            else if (this.currentTab == 3)
                this.recordsOthers.map(record => { record.IsItemSelected = checked });
            else if (this.currentTab == 4)
                this.recordsDeleted.map(record => { record.IsItemSelected = checked });
        },
        showActionButton: function () {
            if (this.currentTab == 0)
                return this.recordsActive.find(obj => obj.IsItemSelected);
            else if (this.currentTab == 1)
                return this.recordsWaiting.find(obj => obj.IsItemSelected);
            else if (this.currentTab == 2)
                return this.recordsClosed.find(obj => obj.IsItemSelected);
            else if (this.currentTab == 3)
                return this.recordsOthers.find(obj => obj.IsItemSelected);
            else if (this.currentTab == 4)
                return this.recordsDeleted.find(obj => obj.IsItemSelected);

        },
        checkAllChecked: function () {
            if (this.currentTab == 0)
                return !this.recordsActive.find(obj => !obj.IsItemSelected);
            else if (this.currentTab == 1)
                return !this.recordsWaiting.find(obj => !obj.IsItemSelected);
            else if (this.currentTab == 2)
                return !this.recordsClosed.find(obj => !obj.IsItemSelected);
            else if (this.currentTab == 3)
                return !this.recordsOthers.find(obj => !obj.IsItemSelected);
            else if (this.currentTab == 4)
                return !this.recordsDeleted.find(obj => !obj.IsItemSelected);
        },
        initTabPanelArray: function () {
            this.tabPanels = [];
            this.showTabPanels = false;
            var vm = this;

            this.tabPanels = [{ text: vm.getLabelText('GN0000222') + '[' + vm.activeCount + ']', enabled: true, hideTabs: [] },
            { text: vm.getLabelText('GN0000413') + '[' + vm.waitingCount + ']', enabled: true, hideTabs: [] },
            { text: vm.getLabelText('GN0000414') + '[' + vm.closedCount + ']', enabled: true, hideTabs: [] },
            { text: vm.getLabelText('SM400021') + '[' + vm.othersCount + ']', enabled: true, hideTabs: [] },
            { text: vm.getLabelText('GN0000302'), enabled: !vm.isLoggedInAsCustomer, hideTabs: [] }];

            setTimeout(function () { vm.showTabPanels = true; }, 50);
        },
        pagerChangeHandler: function (o) {
            this.search.pageIndex = o.pageIndex;
            this.search.pageSize = o.pageSize;
            this.doSearch();
        },
        doClearSearch: async function () {

            this.search.selectedDepartment = this.departments.initialValue;
            this.search.selectedField = '-1';
            this.search.searchString = '';

            this.search.pageIndex = 1;

            this.selectedCDepartment = '-1';
            this.selectedOptions = '-1';
            this.selectedAssignTo = '-1';
            this.selectedStatus = '-1';

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

        },
        doSearch: function () {

            clearAllMsgs();
            var vm = this;
            vm.isLoading = true;

            this.listRecords().catch(function (e) {
                vm.records = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });
        },
    },
    created: async function () {

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

        var vm = this;
        vm.isLoading = true;
        this.handleGlobalSearch();

        await this.listOwners().then(this.listDepartments).then(this.listCDepartments).then(this.listStatuses).then(this.listAgents)
            .then(this.listRecords).catch(function (e) {
                vm.recordsActive = [];
                vm.totalRecords = 0;
                vm.isLoading = false;
                displayErrorMsg(e);
            });

        let urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('TI')) {
            this.currentTab = urlParams.get('TI');
        }
        else if (urlParams.has('T')) {
            this.selectedTimeOut = urlParams.get('T');
            //DDL_TimeOut.Attributes.Add("onChange", "UpdateTimer('" & DDL_TimeOut.ClientID & "');")
        }
        else if (urlParams.has('V')) {
            this.currentTab = urlParams.get('V');
        }

        $(document).ready(function () {
            while (!pageLoadInit) {
                sleep(1);
            }
            pageLoadInit('DDL_TimeOut');
        });
    },
    template: `

        <div class="col-xs-12">
            <div class="card">
                <div class="header"><h3> {{ getLabelText('GN0000366') }}</h3></div>

                <div class="body">
                    <div class="row">

                        <OperationsPanel v-if="!readOnly">
                            <a v-bind:href="'/RCC/HelpDesk/SubmitTicket.aspx'" class="btn btn-primary waves-effect btnAction">New Ticket</a>
                        </OperationsPanel>

                        <SearchPanel id='tickets-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>

                            <div :class="searchContainerDivClass" v-if="departments.show">
                                <div class="form-group form-float">
                                    <VueSelect :options="departments.items" :selectedValue="this.search.selectedDepartment" @selectchange="departmentChangeHandler" />
                                </div>
                            </div>

                            <div :class="searchContainerDivClass">
                                <div class="form-group form-float">
                                    <select v-model="search.selectedField" class="vue-select">
                                        <option value="-1">{{ getLabelText('GN0000389') }}</option>
                                        <option value="0">{{ getLabelText('SPT002758') }}</option>
                                        <option value="1">{{ getLabelText('GN0000390') }}</option>
                                        <option value="2">{{ getLabelText('GN0000371') }}</option>
                                        <option value="3">{{ getLabelText('GN0000268') }}</option>
                                    </select>
                                </div>
                            </div>

                            <InputSearch :searchValue="search.searchString" fieldName="searchString" :fieldLabel="getLabelText('SearchValue')" :containerDivClass="searchContainerDivClass" @inputSearchChange="inputSearchChangeHandler" />

                        </SearchPanel>

                        <div class="col-xs-12" v-if="isLoading">
                            <Loading/>
                        </div>

                        <div class="col-xs-12">
                            <div class="card">
                                <div class="header">
                                    <h3>
                                        {{ getLabelText('GN0000401') }}
                                    </h3>
                                </div>
                                <div class="body">
                                    <div class="row">
                                        <div class="col-sm-3 col-xs-12">
                                            <div class="form-group form-float">
                                                <VueSelect id="DDL_TimeOut" :options="timeoutOptions" :selectedValue="selectedTimeOut" @selectchange="timeoutChangeHandler" />
                                            </div>

                                        </div>
                                        <div class="col-sm-9 col-xs-12">
                                            <input type="hidden" id="HF_ViewId" :value="currentTab" />
                                            <button @click.prevent="listRecords" class="btn btn-primary" id="Btn_Refresh" >{{ getLabelText('GN0000412') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12">
                            <TabContainer v-if="showTabPanels" :id="'viewtickets'" :tabPanels="tabPanels" :activeTabIndex="currentTab" @onActiveTabChanged="activeTabChanged"></TabContainer>

                            <table class="table table-bordered table-striped table-hover" v-if="currentTab == 0 && recordsActive.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">
                                            <label for="CheckAll">
                                                <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            </label>
                                        </th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TicketNumber')">{{ getLabelText('REL1061') }}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('InitialSubject')">{{ getLabelText('GN0000371') }}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustomerID')">{{ getLabelText('GN0000850') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000374') }}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('CompanyName')">{{ getLabelText('SPT002811') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('String385') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000375') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0001300') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000376') }}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="record in recordsActive">
                                        <td class="align-center" v-if="!readOnly">
                                            <label v-bind:for="'cb' + record.TicketId">
                                                <input type="checkbox" v-bind:id="'cb' + record.TicketId" v-model="record.IsItemSelected" />
                                            </label>
                                            <img :src="'/Images/' + record.PriorityImage" :alt="record.PriorityTitle" class="hide" />
                                        </td>
                                        <td>
                                            <a v-bind:href="'/RCC/HelpDesk/ViewTicketDetail.aspx?TicketId=' + record.TicketId" target="_blank">{{ record.TicketNumber }}</a>
                                            <img v-if="record.IsStick" :src="'/App_Themes/' + pageTheme + '/Images/icons/sticky.png'" :alt="getLabelText('SPT002365')" />
                                        </td>
                                        <td>{{ record.InitialSubject }}</td>
                                        <td>
                                            <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerID" target="_blank" >{{ record.CustomerID + ' - ' + record.CustomerName + (record.CustCompanyName == '' ? '' : record.CustCompanyName)}}</a>
                                        </td>
                                        <td>{{ record.DepartmentName }}</td>

                                        <td v-if="record.CompanyID == 1">{{ record.CompanyName }}</td>
                                        <td v-else><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID=' + (record.CustomerIdOfOwner != null && record.CustomerIdOfOwner != '' ? record.CustomerIdOfOwner : record.CompanyId)">{{ record.CompanyName }}</a></td>

                                        <td>{{ record.StatusTitle }}</td>
                                        <td>{{ (record.AssignedTo == -1 ? getLabelText('SPT002366') : record.FirstName + ' ' + record.LastName) }}</td>
                                        <td>{{ record.PriorityTitle }}</td>
                                        <td>{{ record.LatestResponseDateTime }}</td>
                                        <td v-if="!readOnly">
                                            <a @click.prevent="confirmRemove" :data-id="record.TicketId" data-op="delete" :data-compid="record.CompanyID" class="btn btn-primary btn-sm btnAction">{{ getLabelText('GN0000377') }}</a>
                                        </td>
                                    </tr>
                                    <Pager :totalRecords="activeCount" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>

                            <table class="table table-bordered table-striped table-hover" v-if="currentTab == 1 && recordsWaiting.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">
                                            <label for="CheckAll">
                                                <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            </label>
                                        </th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TicketNumber')">{{ getLabelText('REL1061') }}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('InitialSubject')">{{ getLabelText('GN0000371') }}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustomerID')">{{ getLabelText('GN0000850') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000374') }}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('CompanyName')">{{ getLabelText('SPT002811') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('String385') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000375') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0001300') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000376') }}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="record in recordsWaiting">
                                        <td class="align-center" v-if="!readOnly">
                                            <label v-bind:for="'cb' + record.TicketId">
                                                <input type="checkbox" v-bind:id="'cb' + record.TicketId" v-model="record.IsItemSelected" />
                                            </label>
                                            <img :src="'/Images/' + record.PriorityImage" :alt="record.PriorityTitle" class="hide" />
                                        </td>
                                        <td>
                                            <a v-bind:href="'/RCC/HelpDesk/ViewTicketDetail.aspx?TicketId=' + record.TicketId" target="_blank">{{ record.TicketNumber }}</a>
                                            <img v-if="record.IsStick" :src="'/App_Themes/' + pageTheme + '/Images/icons/sticky.png'" :alt="getLabelText('SPT002365')" />
                                        </td>
                                        <td>{{ record.InitialSubject }}</td>
                                        <td>
                                            <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerID" target="_blank" >{{ record.CustomerID + ' - ' + record.CustomerName + (record.CustCompanyName == '' ? '' : record.CustCompanyName)}}</a>
                                        </td>
                                        <td>{{ record.DepartmentName }}</td>

                                        <td v-if="record.CompanyID == 1">{{ record.CompanyName }}</td>
                                        <td v-else><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID=' + (record.CustomerIdOfOwner != null && record.CustomerIdOfOwner != '' ? record.CustomerIdOfOwner : record.CompanyId)">{{ record.CompanyName }}</a></td>

                                        <td>{{ record.StatusTitle }}</td>
                                        <td>{{ (record.AssignedTo == -1 ? getLabelText('SPT002366') : record.FirstName + ' ' + record.LastName) }}</td>
                                        <td>{{ record.PriorityTitle }}</td>
                                        <td>{{ record.LatestResponseDateTime }}</td>
                                        <td v-if="!readOnly">
                                            <a @click.prevent="confirmRemove" :data-id="record.TicketId" data-op="delete" :data-compid="record.CompanyID" class="btn btn-primary btn-sm btnAction">{{ getLabelText('GN0000377') }}</a>
                                        </td>
                                    </tr>
                                    <Pager :totalRecords="waitingCount" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>

                            <table class="table table-bordered table-striped table-hover" v-if="currentTab == 2 && recordsClosed.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">
                                            <label for="CheckAll">
                                                <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            </label>
                                        </th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TicketNumber')">{{ getLabelText('REL1061') }}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('InitialSubject')">{{ getLabelText('GN0000371') }}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustomerID')">{{ getLabelText('GN0000850') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000374') }}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('CompanyName')">{{ getLabelText('SPT002811') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('String385') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000375') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0001300') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000376') }}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="record in recordsClosed">
                                        <td class="align-center" v-if="!readOnly">
                                            <label v-bind:for="'cb' + record.TicketId">
                                                <input type="checkbox" v-bind:id="'cb' + record.TicketId" v-model="record.IsItemSelected" />
                                            </label>
                                            <img :src="'/Images/' + record.PriorityImage" :alt="record.PriorityTitle" class="hide" />
                                        </td>
                                        <td>
                                            <a v-bind:href="'/RCC/HelpDesk/ViewTicketDetail.aspx?TicketId=' + record.TicketId" target="_blank">{{ record.TicketNumber }}</a>
                                            <img v-if="record.IsStick" :src="'/App_Themes/' + pageTheme + '/Images/icons/sticky.png'" :alt="getLabelText('SPT002365')" />
                                        </td>
                                        <td>{{ record.InitialSubject }}</td>
                                        <td>
                                            <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerID" target="_blank" >{{ record.CustomerID + ' - ' + record.CustomerName + (record.CustCompanyName == '' ? '' : record.CustCompanyName)}}</a>
                                        </td>
                                        <td>{{ record.DepartmentName }}</td>

                                        <td v-if="record.CompanyID == 1">{{ record.CompanyName }}</td>
                                        <td v-else><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID=' + (record.CustomerIdOfOwner != null && record.CustomerIdOfOwner != '' ? record.CustomerIdOfOwner : record.CompanyId)">{{ record.CompanyName }}</a></td>

                                        <td>{{ record.StatusTitle }}</td>
                                        <td>{{ (record.AssignedTo == -1 ? getLabelText('SPT002366') : record.FirstName + ' ' + record.LastName) }}</td>
                                        <td>{{ record.PriorityTitle }}</td>
                                        <td>{{ record.LatestResponseDateTime }}</td>
                                        <td v-if="!readOnly">
                                            <a @click.prevent="confirmRemove" :data-id="record.TicketId" data-op="delete" :data-compid="record.CompanyID" class="btn btn-primary btn-sm btnAction">{{ getLabelText('GN0000377') }}</a>
                                        </td>
                                    </tr>
                                    <Pager :totalRecords="closedCount" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>

                            <table class="table table-bordered table-striped table-hover" v-if="currentTab == 3 && recordsOthers.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">
                                            <label for="CheckAll">
                                                <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            </label>
                                        </th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TicketNumber')">{{ getLabelText('REL1061') }}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('InitialSubject')">{{ getLabelText('GN0000371') }}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustomerID')">{{ getLabelText('GN0000850') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000374') }}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('CompanyName')">{{ getLabelText('SPT002811') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('String385') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000375') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0001300') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000376') }}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="record in recordsOthers">
                                        <td class="align-center" v-if="!readOnly">
                                            <label v-bind:for="'cb' + record.TicketId">
                                                <input type="checkbox" v-bind:id="'cb' + record.TicketId" v-model="record.IsItemSelected" />
                                            </label>
                                            <img :src="'/Images/' + record.PriorityImage" :alt="record.PriorityTitle" class="hide" />
                                        </td>
                                        <td>
                                            <a v-bind:href="'/RCC/HelpDesk/ViewTicketDetail.aspx?TicketId=' + record.TicketId" target="_blank">{{ record.TicketNumber }}</a>
                                            <img v-if="record.IsStick" :src="'/App_Themes/' + pageTheme + '/Images/icons/sticky.png'" :alt="getLabelText('SPT002365')" />
                                        </td>
                                        <td>{{ record.InitialSubject }}</td>
                                        <td>
                                            <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerID" target="_blank" >{{ record.CustomerID + ' - ' + record.CustomerName + (record.CustCompanyName == '' ? '' : record.CustCompanyName)}}</a>
                                        </td>
                                        <td>{{ record.DepartmentName }}</td>

                                        <td v-if="record.CompanyID == 1">{{ record.CompanyName }}</td>
                                        <td v-else><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID=' + (record.CustomerIdOfOwner != null && record.CustomerIdOfOwner != '' ? record.CustomerIdOfOwner : record.CompanyId)">{{ record.CompanyName }}</a></td>

                                        <td>{{ record.StatusTitle }}</td>
                                        <td>{{ (record.AssignedTo == -1 ? getLabelText('SPT002366') : record.FirstName + ' ' + record.LastName) }}</td>
                                        <td>{{ record.PriorityTitle }}</td>
                                        <td>{{ record.LatestResponseDateTime }}</td>
                                        <td v-if="!readOnly">
                                            <a @click.prevent="confirmRemove" :data-id="record.TicketId" data-op="delete" :data-compid="record.CompanyID" class="btn btn-primary btn-sm btnAction">{{ getLabelText('GN0000377') }}</a>
                                        </td>
                                    </tr>
                                    <Pager :totalRecords="othersCount" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>

                            <table class="table table-bordered table-striped table-hover" v-if="currentTab == 4 && recordsDeleted.length > 0">
                                <tbody>
                                    <tr>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">
                                            <label for="CheckAll">
                                                <input type="checkbox" id="CheckAll" :checked="checkAllChecked()" @change="checkAll($event.target.checked);" />
                                            </label>
                                        </th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('TicketNumber')">{{ getLabelText('REL1061') }}</a></th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('InitialSubject')">{{ getLabelText('GN0000371') }}</a></th>
                                        <th class="col-xs-2"><a href="#" @click.prevent="sortBy('CustomerID')">{{ getLabelText('GN0000850') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000374') }}</th>
                                        <th class="col-xs-1"><a href="#" @click.prevent="sortBy('CompanyName')">{{ getLabelText('SPT002811') }}</a></th>
                                        <th class="col-xs-1">{{ getLabelText('String385') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000375') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0001300') }}</th>
                                        <th class="col-xs-1">{{ getLabelText('GN0000376') }}</th>
                                        <th class="col-xs-1 align-center" v-if="!readOnly">{{ getLabelText('GN0000360') }}</th>
                                    </tr>
                                    <tr v-for="record in recordsDeleted">
                                        <td class="align-center" v-if="!readOnly">
                                            <label v-bind:for="'cb' + record.TicketId">
                                                <input type="checkbox" v-bind:id="'cb' + record.TicketId" v-model="record.IsItemSelected" />
                                            </label>
                                            <img :src="'/Images/' + record.PriorityImage" :alt="record.PriorityTitle" class="hide" />
                                        </td>
                                        <td>
                                            <a v-bind:href="'/RCC/HelpDesk/ViewTicketDetail.aspx?TicketId=' + record.TicketId" target="_blank">{{ record.TicketNumber }}</a>
                                            <img v-if="record.IsStick" :src="'/App_Themes/' + pageTheme + '/Images/icons/sticky.png'" :alt="getLabelText('SPT002365')" />
                                        </td>
                                        <td>{{ record.InitialSubject }}</td>
                                        <td>
                                            <a v-bind:href="'/RCC/Clients/ClientDetail.aspx?CID=' + record.CustomerID" target="_blank" >{{ record.CustomerID + ' - ' + record.CustomerName + (record.CustCompanyName == '' ? '' : record.CustCompanyName)}}</a>
                                        </td>
                                        <td>{{ record.DepartmentName }}</td>

                                        <td v-if="record.CompanyID == 1">{{ record.CompanyName }}</td>
                                        <td v-else><a v-bind:href="'/RCC/Clients/ClientDetail.aspx?RD=1&CID=' + (record.CustomerIdOfOwner != null && record.CustomerIdOfOwner != '' ? record.CustomerIdOfOwner : record.CompanyId)">{{ record.CompanyName }}</a></td>

                                        <td>{{ record.StatusTitle }}</td>
                                        <td>{{ (record.AssignedTo == -1 ? getLabelText('SPT002366') : record.FirstName + ' ' + record.LastName) }}</td>
                                        <td>{{ record.PriorityTitle }}</td>
                                        <td>{{ record.LatestResponseDateTime }}</td>
                                        <td v-if="!readOnly">
                                            <a @click.prevent="confirmRemove" :data-id="record.TicketId" data-op="restore" :data-compid="record.CompanyID" class="btn btn-primary btn-sm btnAction">{{ getLabelText('SMI0441') }}</a>
                                            <a @click.prevent="confirmRemove" :data-id="record.TicketId" data-op="delete" :data-compid="record.CompanyID" class="btn btn-primary btn-sm btnAction">{{ getLabelText('GN0000377') }}</a>
                                        </td>
                                    </tr>
                                    <Pager :totalRecords="deletedCount" :pageSize="this.search.pageSize" :currentPage="this.search.pageIndex" @pagerChange="pagerChangeHandler" />
                                </tbody>
                            </table>

                        </div>

                        <div class="col-xs-12" v-if="recordsActive.length > 0 || recordsWaiting.length > 0 || recordsClosed.length > 0 || recordsOthers.length > 0 || recordsDeleted.length > 0">
                            <div class="card">
                                <div class="header">
                                    <h3>{{ getLabelText('GN0000368') }}</h3>
                                </div>

                                <div class="body">
                                    <div class="row">
                                        <div class="col-md-3 col-sm-6 col-xs-12">
                                            <div class="form-group form-float">
                                                <select v-model="selectedOptions" class="vue-select">
                                                    <option value="-1">{{ getLabelText('GN0000380') }}</option>
                                                    <option value="0" v-if="currentTab != 4">{{ getLabelText('GN0000396') }}</option>
                                                    <option value="1" v-if="currentTab == 4">{{ getLabelText('SMI0441') }}</option>
                                                    <option value="1" v-else>{{ getLabelText('GN0000397') }}</option>
                                                    <option value="2" v-if="currentTab == 4">{{ getLabelText('GN0000377') }}</option>
                                                    <option value="2" v-else>{{ getLabelText('GN0000398') }}</option>
                                                    <option value="3" v-if="currentTab != 4">{{ getLabelText('GN0000384') }}</option>
                                                </select>
                                            </div>
                                        </div>            
                                        <div class="col-md-3 col-sm-6 col-xs-12" v-if="currentTab != 4">
                                            <div class="form-group form-float">
                                                <VueSelect :options="statuses.items" :selectedValue="this.selectedStatus" @selectchange="statusChangeHandler" />
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-6 col-xs-12" v-if="currentTab != 4">
                                            <div class="form-group form-float">
                                                <VueSelect :options="departmentsC.items" :selectedValue="this.selectedCDepartment" @selectchange="cdepartmentChangeHandler" />
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-6 col-xs-12" v-if="currentTab != 4">
                                            <div class="form-group form-float">
                                                <VueSelect :id="'DDL_AssignTo'" :options="agents.items" :selectedValue="this.selectedAssignTo" @selectchange="assignToChangeHandler" />
                                            </div>
                                        </div>

                                        <div class="col-sm-3 col-xs-12">
                                            <div class="form-group">
                                                <a @click.prevent="changeTickets" v-bind:class="[{'disabled':(search.selectedOwner < 1)}, 'btn btn-primary btnAction']">{{ getLabelText('GN0000385') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
`
}
