<!--suppress JSAnnotator -->
<template>
    <!-- Page, data-name contains page name which can be used in callbacks -->
    <div class="page " data-name="reports-scheduled">
        <!-- page-with-subnavbar -->
        <!-- Top Navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                    </a>
                </div>
                <div class="title sliding">{{@global.LANGUAGE.REPORT_PANEL_MSG19}}</div>
                <div class="right">
                    <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->
                </div>

                <div class="subnavbar">
                    <form class="searchbar">
                        <div class="searchbar-inner">
                            <div class="searchbar-input-wrap">
                                <input type="search" placeholder="{{@global.LANGUAGE.COM_MSG02}}">
                                <i class="searchbar-icon"></i>
                                <span class="input-clear-button"></span>
                            </div>
                            <span class="searchbar-disable-button">{{@global.LANGUAGE.COM_MSG03}}</span>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
            <div class="row">
                <a href="#" class="col link button button-fill color-green elevation-2 popup-open"
                    data-popup=".popup-report-type-select">{{@global.LANGUAGE.COM_MSG37}}</a>
            </div>
        </div>

        <!-- Scrollable page content-->
        <div class="page-content">
            <div class="searchbar-backdrop"></div>

            <div class="block searchbar-not-found">
                <div class="block-inner">{{@global.LANGUAGE.PROMPT_MSG008}}</div>
            </div>
            {{#if ShowList}}
            <div key="VirtualList"
                class="list media-list virtual-list no-hairlines no-margin no-chevron searchbar-found scheduledlist">
            </div>

            {{else}}
            <div key="VirtualListPreloader" class="block block-strong text-align-center">
                <div class="preloader color-red"></div>
            </div>
            {{/if}}

        </div>

        <div class="popup popup-panel-bigger popup-report-type-select">
            <div class="view">
                <div class="page">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="left"></div>
                            <div class="title">{{@global.LANGUAGE.REPORT_PANEL_MSG26}}</div>
                            <div class="right">
                                <a href="#" class="link popup-close">
                                    <i class="f7-icons">close</i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="page-content">
                        <div
                            class="row justify-content-space-evenly align-content-center panel-button-wrapper report-panel-button-wrapper ">
                            <a href="/reports-schedule-edit/?type=1" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-1 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG00}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-low-battery size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG09}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=4" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-2 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG01}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-disconnect size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG10}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=3" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-3 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG02}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-not-reporting size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG11}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=5" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-4 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG03}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-sold size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG12}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=14" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-14 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.DASHBOARD_PANEL_MSG43}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-overview size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG137}}</p>
                                </div>
                            </a>

                            <a href="/reports-schedule-edit/?type=11" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-11 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG80}}</p>
                                    <div>
                                        <i class="f7-icons icon-admin-geofences size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG81}}</p>
                                </div>
                            </a>

                            <a href="/reports-schedule-edit/?type=13" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-4 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG78}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-servicing-log size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG117}}</p>
                                </div>
                            </a>

                            <a href="/reports-schedule-edit/?type=19" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-10 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG109}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-playback size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG15}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=12" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-12 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG79}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-trip size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG95}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=16" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-5 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG152}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-benefit-tax size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG155}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=28" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-7 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG197}}</p>
                                    <div>
                                        <i class="f7-icons icon-driver-star size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG198}}</p>
                                </div>
                            </a>
                            <!--!<a href="/reports-schedule-edit/?type=6" data-view=".view-left" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-2 link overflow-hidden popup-close" >
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG06}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-in-lot size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG13}}</p>
                                    </div>
                                </a>-->
                            <a href="/reports-schedule-edit/?type=7" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-6 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG05}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-off-lot size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG14}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=8" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-8 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG07}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-drive-off size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG16}}</p>
                                </div>
                            </a>
                            <a href="/reports-schedule-edit/?type=9" data-view=".view-left"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-9 link overflow-hidden popup-close">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG08}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-alarm-report size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG17}}</p>
                                </div>
                            </a>
                            <!--d<a href="/reports-schedule-edit/?type=14" data-view=".view-left" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-2 link overflow-hidden popup-close">
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG77}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-sold size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG12}}</p>
                                    </div>
                                </a>-->

                            <!--<a href="#" @click="showUnderDevelopmentAlert" data-alert-title="{{@global.LANGUAGE.REPORT_PANEL_MSG02}}" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-3 link overflow-hidden under-development-smaller">
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG02}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-not-reporting size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG11}}</p>
                                    </div>
                                </a>
                                <a href="#" @click="showUnderDevelopmentAlert" data-alert-title="{{@global.LANGUAGE.REPORT_PANEL_MSG03}}" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-4 link overflow-hidden under-development-smaller">
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG03}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-sold size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG12}}</p>
                                    </div>
                                </a>-->
                            <a href="#" @click="showUnderDevelopmentAlert"
                                data-alert-title="{{@global.LANGUAGE.REPORT_PANEL_MSG06}}"
                                class="card elevation-6 elevation-hover-9 elevation-transition bg-color-5 link overflow-hidden under-development-smaller">
                                <div
                                    class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                    <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG06}}</p>
                                    <div>
                                        <i class="f7-icons icon-report-in-lot size-40"></i>
                                    </div>
                                    <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG13}}</p>
                                </div>
                            </a>
                            <!--
                                <a href="#" @click="showUnderDevelopmentAlert" data-alert-title="{{@global.LANGUAGE.REPORT_PANEL_MSG05}}" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-6 link overflow-hidden under-development-smaller">
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG05}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-off-lot size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG14}}</p>
                                    </div>
                                </a>
                                <a href="#" @click="showUnderDevelopmentAlert" data-alert-title="{{@global.LANGUAGE.REPORT_PANEL_MSG07}}" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-8 link overflow-hidden under-development-smaller">
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG07}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-drive-off size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG16}}</p>
                                    </div>
                                </a>
                                <a href="#" @click="showUnderDevelopmentAlert" data-alert-title="{{@global.LANGUAGE.REPORT_PANEL_MSG08}}" class="card elevation-6 elevation-hover-9 elevation-transition bg-color-9 link overflow-hidden under-development-smaller">
                                    <div class="card-content card-content-padding text-color-white text-align-center align-self-flex-start">
                                        <p class="size-16 margin-bottom-4">{{@global.LANGUAGE.REPORT_PANEL_MSG08}}</p>
                                        <div>
                                            <i class="f7-icons icon-report-alarm-report size-40"></i>
                                        </div>
                                        <p class="margin-top-4">{{@global.LANGUAGE.REPORT_PANEL_MSG17}}</p>
                                    </div>
                                </a>-->

                            <div class="card no-shadow"></div>

                        </div>

                    </div>
                </div>
            </div>
        </div>


    </div>
</template>


<script>
    // script must return component object
    return {
        data: function () {
            var self = this;


            var ret = {
                //Reports: [],
                ShowList: false,
            };

            return ret;
        },
        methods: {
            getScheduledList: function () {
                var self = this;

                var userInfo = self.$app.methods.getFromStorage('userInfo');

                var data = {
                    MinorToken: userInfo.MinorToken,
                    MajorToken: userInfo.MajorToken,
                    //ModelType: 'LOW_POWER'
                };

                self.$app.preloader.show();
                self.$app.request.post(API_URL.GET_SCHEDULE_REPORT_LIST, data, function (result, xhr, status) {
                    self.$app.preloader.hide();
                    console.log(result);
                    if (result && result.MajorCode === '000') {
                        if (result.Data) {
                            self.$app.methods.setInStorage({ name: 'scheduledReportList', data: result.Data });

                            self.$setState({
                                ShowList: true,
                                //ScheduledList: formattedList,
                            });
                            self.$app.utils.nextFrame(() => {
                                self.initList(result.Data);
                            });
                        }

                    } else if (result.MajorCode === '100' && result.MinorCode === '1003') {
                        self.$app.utils.nextTick(function () {
                            leftView.router.back();
                        }, 500);
                        self.$app.methods.customDialog({ title: LANGUAGE.PROMPT_MSG050, text: LANGUAGE.PROMPT_MSG051 });
                    } else {
                        self.$app.utils.nextTick(function () {
                            leftView.router.back();
                        }, 500);
                        self.$app.dialog.alert('Something wrong');
                    }

                },
                    function (xhr, status) {
                        self.$app.preloader.hide();
                        self.$app.dialog.alert('Error occured at Get Interval Reminders List ');
                    },
                    'json');
            },
            formatList: function (list = []) {
                var self = this;
                if (list.length) {
                    var contactList = self.$app.methods.getFromStorage('contactList');
                    //contactList = self.$app.methods.sortContactList(contactList);
                    for (var i = list.length - 1; i >= 0; i--) {
                        if (list[i].Type) {
                            switch (list[i].Type) {
                                case 'D':
                                    list[i].TypeName = LANGUAGE.REPORT_PANEL_MSG29;
                                    break;
                                case 'W':
                                    list[i].TypeName = LANGUAGE.REPORT_PANEL_MSG30;
                                    break;
                                default:
                                    list[i].TypeName = LANGUAGE.REPORT_PANEL_MSG31;
                            }
                        }
                        if (list[i].ContactCodes && list[i].ContactCodes.length) {
                            var contactEmails = '';
                            for (var y = list[i].ContactCodes.length - 1; y >= 0; y--) {
                                contactEmails += self.$app.methods.findObjectByKey(contactList, 'Code', list[i].ContactCodes[y])?.EMail + ', ';
                            }
                            if (contactEmails) {
                                contactEmails = contactEmails.slice(0, -2);
                            }
                            list[i].ContactEmails = contactEmails;
                        }
                    }
                    list.sort(function (a, b) {
                        if (a.Name < b.Name) return -1;
                        if (a.Name > b.Name) return 1;
                        return 0;
                    });
                }
                return list;
            },
            initList: function (listArr = []) {
                var self = this;

                var listEl = self.$el.find('.scheduledlist');
                var listSearchEl = self.$el.find('.searchbar');

                var formattedList = self.formatList(listArr);

                self.VirtualList = app.virtualList.create({
                    el: listEl,
                    setListHeight: false,
                    // search item by item
                    searchAll: function (query, items) {
                        var found = [];
                        query = query.trim().toLowerCase();
                        for (var i = 0; i < items.length; i++) {
                            if (items[i].Name.toLowerCase().indexOf(query) >= 0 || query === '') found.push(i);
                        }
                        return found; //return array with mathced indexes
                    },
                    //List of array items
                    items: formattedList,
                    height: function (item) {
                        let height = 114.63;

                        return height;
                    },
                    // Display the each item using Template7 template parameter
                    renderItem: function (item, index) {
                        let ret = '';
                        console.log('it', item)

                        let reportType = LANGUAGE.REPORT_PANEL_MSG00;
                        //let serviceTypeObj = self.$app.methods.findObjectByKey(intervalParameters.ServerTypeList, 'Value', item.ServiceType);
                        //let icon = self.getReportTypeIcon();
                        let icon = 'icon-report-low-battery';

                        if (item.ModelType && item.ModelType === 'DISCONNECT') {
                            icon = 'icon-report-disconnect';
                            reportType = LANGUAGE.REPORT_PANEL_MSG01;
                        }


                        switch (item.ModelType) {
                            case 'LOW_POWER':
                                reportType = LANGUAGE.REPORT_PANEL_MSG00;
                                break;

                            case 'DISCONNECT':
                                reportType = LANGUAGE.REPORT_PANEL_MSG01;
                                break;

                            case 'OVERVIEW':
                                reportType = LANGUAGE.REPORT_PANEL_MSG77;
                                break;
                            case 'ALARM_REPORT':
                                reportType = LANGUAGE.REPORT_PANEL_MSG08;
                                break;
                            case 'TRIP_REPORT':
                                reportType = LANGUAGE.REPORT_PANEL_MSG79;
                                break;
                            case 'GEOFENCE_REPORT':
                                reportType = LANGUAGE.REPORT_PANEL_MSG80;
                                break;

                        }

                        ret = `
                                <li data-code="${item.Code}">
                                    <div class="item-content" >
                                        <div class="item-media">
                                            <div class="user-icon text-align-center text-color-white bg-color-red display-flex align-items-center justify-content-center text-transform-uppercase">
                                                <i class="f7-icons size-16 line-height-icon-fix ${icon}"></i>
                                            </div>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title weight-500 text-color-black text-transform-uppercase">
                                                    <div class="item-header text-transform-capitalize" title="${LANGUAGE.REPORT_PANEL_MSG28}">${reportType}</div>
                                                    ${item.Name ? item.Name : ''}
                                                </div>
                                                <div class="item-after">
                                                    <a href="#" class="link ripple-color-red cursor-pointer itemMenu"><i class="f7-icons icon-menu-asset size-18"></i></a>
                                                </div>
                                            </div>
                                            <div class="divider"></div>
                                            <div class="item-text">
                                                <div class="row no-gutter">
                                                    <div class="col-100 white-space-no-wrap" title="${LANGUAGE.REPORT_PANEL_MSG20}">
                                                        <i class="f7-icons size-16 icon-time-period asset_list_icon text-color-lightgray vertical-middle"></i>
                                                        <span class="size-14 vertical-middle">${item.TypeName}</span>
                                                    </div>
                                                    <div class="col-100 white-space-no-wrap" title="${LANGUAGE.REPORT_PANEL_MSG23}: ${item.ContactEmails}">
                                                        <i class="f7-icons size-16 icon-email asset_list_icon text-color-lightgray vertical-middle"></i>
                                                        <span class="size-14 vertical-middle">${item.ContactEmails}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                        `;


                        return ret;
                    },
                    emptyTemplate:
                        `<div class="block">
                            ${LANGUAGE.PROMPT_MSG0101}
                            <br>
                            ${LANGUAGE.PROMPT_MSG059}
                            <a href="#" data-view=".view-left" class="button button-fill color-green elevation-2 margin popup-open" data-popup=".popup-report-type-select">${LANGUAGE.COM_MSG37}</a>
                        </div>`,
                });

                // init searchbar
                self.VirtualListSearchBar = app.searchbar.create({
                    el: listSearchEl,
                    searchContainer: listEl,
                    searchIn: '.item-inner',
                });

            },
            deleteScheduled: function (code) {
                let self = this;
                if (code) {
                    var report = self.VirtualList.items.find(obj => obj.Code === code);
                    var text = LANGUAGE.PROMPT_MSG089 + ' ' + report.Name + '.' + ' ' + LANGUAGE.PROMPT_MSG022;
                    self.$app.dialog.confirm(text,
                        function () {
                            var userInfo = self.$app.methods.getFromStorage('userInfo');
                            var data = {
                                MajorToken: userInfo.MajorToken,
                                MinorToken: userInfo.MinorToken,
                                Code: code,
                            };

                            self.$app.preloader.show();
                            self.$app.request.post(API_URL.SCHEDULED_REPORT_DELETE, data, function (result = {}, xhr, status) {
                                self.$app.preloader.hide();
                                console.log(result);
                                if (result.MajorCode === '000') {
                                    self.$app.methods.customNotification({ title: report.Name, text: LANGUAGE.PROMPT_MSG0117 });
                                    leftView.router.refreshPage();
                                } else {
                                    self.$app.dialog.alert('Something wrong');
                                }
                            },
                                function (xhr, status) {
                                    self.$app.preloader.hide();
                                    self.$app.dialog.alert('Error occured at SCHEDULED_REPORT_DELETE');
                                },
                                'json');
                        }
                    );
                }
            },
            showUnderDevelopmentAlert: function (e, param) {
                var self = this;

                var title = '';
                if (!param) {
                    if (e) {
                        title = $$(e.target).closest('[data-alert-title]').data('alert-title');
                    } else {
                        title = app.name;
                    }
                } else {
                    title = param;
                }

                self.$app.methods.showUnderDevelopmentAlert({ title });
            },
        },

        on: {
            pageInit: function (e, page) {
                var self = this;

                self.getScheduledList();

                var pageContainer = page.$el.find('.page-content');

                pageContainer.on('click', '.itemMenu', function (e) {
                    var code = $$(e.target).closest('li').data('code');

                    self.$app.popover.create({
                        backdrop: false,
                        closeByOutsideClick: true,
                        targetEl: e.target,
                        content: '<div class="popover menu-popover" >' +
                            '<div class="popover-inner">' +
                            '<div class="list rightMenuList">' +
                            '<ul>' +
                            '<a href="/reports-schedule-edit/?code=' + code + '" data-view=".view-left" class="item-link list-button popover-close"> ' + LANGUAGE.INTERVAL_REMINDERS_MSG01 + '</a>' +
                            '<a href="#" class="item-link list-button popover-close text-color-red ripple-color-red deleteItem" data-code="' + code + '">' + LANGUAGE.INTERVAL_REMINDERS_MSG02 + '</a>' +
                            '</ul>' +
                            '</div> ' +
                            '</div>' +
                            '</div>',
                        on: {
                            open: function (popover) {
                                var buttonDelete = popover.$el.find('.deleteItem');

                                buttonDelete.on('click', function () {
                                    self.deleteScheduled($$(this).data('code'));
                                });

                            },
                            closed: function (popover) {
                                popover.$el.remove();
                                popover.destroy();
                            }
                        }
                    }).open();
                });

            },

            pageBeforeRemove: function (e, page) {
                if (self.VirtualList && !self.$app.methods.isObjEmpty(self.VirtualList)) {
                    self.VirtualList.destroy();
                }

                if (self.VirtualListSearchBar) {
                    self.VirtualListSearchBar.destroy();
                }
            },
        }
    };
</script>