import { Component } from '@angular/core';
import { BehaviorSubject } from "rxjs";
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc';
import * as i0 from "@angular/core";
import * as i1 from "../../services/trax.service";
import * as i2 from "tango-app-ui-shared";
import * as i3 from "tango-app-ui-global";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
import * as i6 from "ngx-daterangepicker-material";
dayjs.extend(utc);
export class OrdersComponent {
    sopService;
    toastService;
    pageInfo;
    dayjs = dayjs;
    displayedColumns = [];
    date = this.dayjs().add(1, 'day').format();
    dataSource = [];
    storeCodes = '';
    isAuthorized = 'UNAUTHORIZED';
    isCustomDate = (m) => {
        const isValidDate = m > this.dayjs().add(3, 'day') || m < this.dayjs();
        return isValidDate ? 'invalid-date' : false;
    };
    selectedDateRange = { startDate: this.dayjs().add(1, 'day'), endDate: this.dayjs().add(1, 'day') };
    tableApiState = new BehaviorSubject('initial');
    constructor(sopService, toastService, pageInfo) {
        this.sopService = sopService;
        this.toastService = toastService;
        this.pageInfo = pageInfo;
    }
    ngOnInit() {
        this.sopService.isLocusAuthorized().subscribe((res) => {
            this.isAuthorized = res.message || 'UNAUTHORIZED';
            if (this.isAuthorized === 'AUTHORIZED') {
                this.setPageData();
                this.getOrdersByDate();
            }
        });
    }
    setPageData() {
        this.pageInfo.setTitle("Create Order");
        this.pageInfo.setDescription("Create order ID list to map with Locus");
        this.pageInfo.setBreadcrumbs([
            { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
            { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
            { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
            { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
        ]);
    }
    getOrdersByDate() {
        this.tableApiState.next('loading');
        const reqBody = {
            date: this.date
        };
        this.sopService.getOrdersByDate(reqBody).subscribe({
            next: (res) => {
                this.tableApiState.next('loaded');
                if (res?.data?.length) {
                    this.dataSource = res?.data;
                }
                else {
                    this.dataSource = [];
                }
            },
            error: () => {
            }
        });
    }
    onDateChange(event) {
        if (!event?.startDate) {
            return;
        }
        this.date = this.dayjs(event.startDate).format();
        this.storeCodes = '';
        this.getOrdersByDate();
    }
    updateOrder() {
        const reqBody = {
            storeCodes: this.storeCodes,
            date: this.date
        };
        this.sopService.orderUpdate(reqBody).subscribe({
            next: (res) => {
                if (res?.code === 200) {
                    this.storeCodes = '';
                    if (res.message === 'Updated successfully') {
                        this.toastService.getSuccessToast(res.message);
                    }
                    else {
                        this.toastService.getErrorToast(res.message);
                    }
                    this.getOrdersByDate();
                }
            }
        });
    }
    deleteOrder(id) {
        const reqBody = {
            _id: id
        };
        this.sopService.orderDelete(reqBody).subscribe({
            next: (res) => {
                if (res?.code === 200) {
                    this.toastService.getSuccessToast(res.message);
                    this.getOrdersByDate();
                }
            }
        });
    }
    sortTableData(event) {
        if (event?.direction === 'asc' || 'desc') {
            this.dataSource = this.sortObjectArray([...this.dataSource], event);
        }
    }
    sortObjectArray(dataArray, sortConfig) {
        const { active, direction } = sortConfig;
        const sortOrder = direction.toLowerCase() === 'asc' ? 1 : -1;
        return dataArray.sort((a, b) => {
            const valueA = (a[active] || '').toString().toLowerCase();
            const valueB = (b[active] || '').toString().toLowerCase();
            if (valueA < valueB) {
                return -1 * sortOrder;
            }
            else if (valueA > valueB) {
                return 1 * sortOrder;
            }
            else {
                return 0;
            }
        });
    }
    exportAsExcel() {
        const excludeKeys = ['createdAt', 'updatedAt', '_id', 'date', 'type'];
        const excludedData = this.removeExcludedKeys(this.dataSource, excludeKeys);
        const exportData = this.replaceUnderscoreInKeys(excludedData);
        this.sopService.exportAsCSVFile(exportData, `${this.dayjs(this.date).format('DD_MM_YYYY')}_List`);
    }
    removeExcludedKeys(dataArray, excludeKeys) {
        return dataArray.map(item => {
            const newItem = {};
            for (const key in item) {
                if (item.hasOwnProperty(key) && !excludeKeys.includes(key)) {
                    newItem[key] = item[key];
                }
            }
            return newItem;
        });
    }
    replaceUnderscoreInKeys(dataArray) {
        return dataArray.map(item => {
            const newItem = {};
            for (const key in item) {
                if (item.hasOwnProperty(key)) {
                    const newKey = key.replace(/_/g, ' ');
                    newItem[newKey] = item[key];
                }
            }
            return newItem;
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrdersComponent, deps: [{ token: i1.TraxService }, { token: i2.ToastService }, { token: i3.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OrdersComponent, selector: "lib-orders", ngImport: i0, template: "<ng-container *ngIf=\"isAuthorized === 'AUTHORIZED'\" >\r\n    <div class=\"row\">\r\n        <div class=\"col-md-12 my-2\">\r\n            <div class=\" card\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-lg-12\">\r\n                        <div class=\"card-header border-0 pt-4 px-4\">\r\n                            <h3 class=\"card-title align-items-start flex-column\">\r\n                                <span class=\"card-label mb-2\">Task Configuration</span>\r\n                            </h3>\r\n                            <div class=\"card-toolbar\">\r\n                                <div class=\"d-flex\">\r\n                                    <div class=\"d-flex align-items-center  position-relative my-1\">\r\n                                        <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute  ms-4\">\r\n                                            <svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                                viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                <path\r\n                                                    d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\">\r\n                                                </path>\r\n                                            </svg>\r\n                                        </span>\r\n\r\n                                        <input class=\"fx-date-range form-control ps-14\"\r\n                                            style=\"min-width: 100px !important;\" type=\"text\" matInput\r\n                                            ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\"\r\n                                            [opens]=\"'right'\" [alwaysShowCalendars]=\"false\"\r\n                                            [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n                                            autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                            [ngModelOptions]=\"{standalone: true}\"\r\n                                            (startDateChanged)=\"onDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                            [autoApply]=\"true\"\r\n                                            [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                            name=\"daterange\" [readonly]=\"true\" />\r\n\r\n                                        <button [disabled]=\"!dataSource.length\" (click)=\"exportAsExcel()\" type=\"button\"\r\n                                            class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n                                            <!-- Export Icon -->\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                                viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                <path\r\n                                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </svg>\r\n                                            <span class=\"ms-2\"></span> Export\r\n                                        </button>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"card-body p-0\">\r\n                            <ng-container>\r\n                                <ng-container\r\n                                    *ngIf=\"(tableApiState | async) === 'loaded' \">\r\n                                    <div class=\"table-responsive px-4\">\r\n                                        <table class=\"table text-nowrap bottom-border\">\r\n                                            <thead>\r\n                                                <tr>\r\n                                                    <th>Action</th>\r\n                                                    <th>Task ID</th>\r\n                                                    <th>Service Type</th>\r\n                                                    <th>Customer Name</th>\r\n                                                    <th>Customer Contact</th>\r\n                                                    <th>Customer Address</th>\r\n                                                    <th>City</th>\r\n                                                    <th>State</th>\r\n                                                    <th>Country</th>\r\n                                                    <th>Customer Zipcode</th>\r\n                                                    <th>Latitude</th>\r\n                                                    <th>Longitude</th>\r\n                                                    <th>Task Date</th>\r\n                                                    <th>Task Start Time</th>\r\n                                                    <th>Task End Time</th>\r\n                                                    <th>TAT</th>\r\n                                                    <th>Payment Method</th>\r\n                                                    <th>Amount</th>\r\n                                                    <th>Note</th>\r\n                                                    <th>user ID</th>\r\n                                                </tr>\r\n                                                <tr>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important;\" ></th>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important;\" ></th>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important;\" ></th>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important; padding-left: unset !important;\" >\r\n                                                        <input (keydown.enter)=\"updateOrder()\" [(ngModel)]=\"storeCodes\" style=\"min-width: 250px;\" class=\"form-control\" type=\"text\">\r\n                                                    </th>\r\n                                                </tr>\r\n                                            </thead>\r\n                                            <tbody>\r\n                                                <tr *ngFor=\"let element of dataSource\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex  align-items-center justify-content-center\">\r\n                                                            <svg (click)=\"deleteOrder(element?._id)\" class=\"cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                                                fill=\"none\">\r\n                                                                <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </svg>\r\n                                                        </div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_ID}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.Service_Type}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Name}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Contact}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Address}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.City}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.State}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Country}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Zipcode}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.Latitude}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.Longitude}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_Date}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_Start_Time}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_End_Time}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.TAT}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Payment_Method}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Amount}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Note}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.user_ID}}</div>\r\n                                                    </td>\r\n    \r\n                                                \r\n    \r\n                                                </tr>\r\n                                            </tbody>\r\n                                        </table>\r\n    \r\n                                    </div>\r\n                                   \r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container\r\n                                *ngIf=\"(tableApiState | async) === 'loading' || (tableApiState | async) === 'initial'\">\r\n                                <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                                    <div class=\"shimmer\">\r\n                                        <div class=\"wrapper\">\r\n                                            <div class=\"stroke animate title\"></div>\r\n                                            <div class=\"stroke animate link\"></div>\r\n                                            <div class=\"stroke animate description\"></div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"shimmer\">\r\n                                        <div class=\"wrapper\">\r\n                                            <div class=\"stroke animate title\"></div>\r\n                                            <div class=\"stroke animate link\"></div>\r\n                                            <div class=\"stroke animate description\"></div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n    \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    \r\n    </div>\r\n</ng-container>\r\n", styles: [".data{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.data-dark{color:var(--Gray-900, #101828);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.rotate{rotate:180deg;transition:1s}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep .md-drppicker table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrdersComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-orders', template: "<ng-container *ngIf=\"isAuthorized === 'AUTHORIZED'\" >\r\n    <div class=\"row\">\r\n        <div class=\"col-md-12 my-2\">\r\n            <div class=\" card\">\r\n                <div class=\"row\">\r\n                    <div class=\"col-lg-12\">\r\n                        <div class=\"card-header border-0 pt-4 px-4\">\r\n                            <h3 class=\"card-title align-items-start flex-column\">\r\n                                <span class=\"card-label mb-2\">Task Configuration</span>\r\n                            </h3>\r\n                            <div class=\"card-toolbar\">\r\n                                <div class=\"d-flex\">\r\n                                    <div class=\"d-flex align-items-center  position-relative my-1\">\r\n                                        <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute  ms-4\">\r\n                                            <svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                                viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                <path\r\n                                                    d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\">\r\n                                                </path>\r\n                                            </svg>\r\n                                        </span>\r\n\r\n                                        <input class=\"fx-date-range form-control ps-14\"\r\n                                            style=\"min-width: 100px !important;\" type=\"text\" matInput\r\n                                            ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\"\r\n                                            [opens]=\"'right'\" [alwaysShowCalendars]=\"false\"\r\n                                            [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"false\"\r\n                                            autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                                            [ngModelOptions]=\"{standalone: true}\"\r\n                                            (startDateChanged)=\"onDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                                            [autoApply]=\"true\"\r\n                                            [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                                            name=\"daterange\" [readonly]=\"true\" />\r\n\r\n                                        <button [disabled]=\"!dataSource.length\" (click)=\"exportAsExcel()\" type=\"button\"\r\n                                            class=\"btn-outline btn align-items-end text-nowrap invheader ms-4\">\r\n                                            <!-- Export Icon -->\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                                viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                                <path\r\n                                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                                    stroke-linejoin=\"round\"></path>\r\n                                            </svg>\r\n                                            <span class=\"ms-2\"></span> Export\r\n                                        </button>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"card-body p-0\">\r\n                            <ng-container>\r\n                                <ng-container\r\n                                    *ngIf=\"(tableApiState | async) === 'loaded' \">\r\n                                    <div class=\"table-responsive px-4\">\r\n                                        <table class=\"table text-nowrap bottom-border\">\r\n                                            <thead>\r\n                                                <tr>\r\n                                                    <th>Action</th>\r\n                                                    <th>Task ID</th>\r\n                                                    <th>Service Type</th>\r\n                                                    <th>Customer Name</th>\r\n                                                    <th>Customer Contact</th>\r\n                                                    <th>Customer Address</th>\r\n                                                    <th>City</th>\r\n                                                    <th>State</th>\r\n                                                    <th>Country</th>\r\n                                                    <th>Customer Zipcode</th>\r\n                                                    <th>Latitude</th>\r\n                                                    <th>Longitude</th>\r\n                                                    <th>Task Date</th>\r\n                                                    <th>Task Start Time</th>\r\n                                                    <th>Task End Time</th>\r\n                                                    <th>TAT</th>\r\n                                                    <th>Payment Method</th>\r\n                                                    <th>Amount</th>\r\n                                                    <th>Note</th>\r\n                                                    <th>user ID</th>\r\n                                                </tr>\r\n                                                <tr>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important;\" ></th>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important;\" ></th>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important;\" ></th>\r\n                                                    <th  style=\"background-color: unset !important; border-bottom: unset !important; padding-left: unset !important;\" >\r\n                                                        <input (keydown.enter)=\"updateOrder()\" [(ngModel)]=\"storeCodes\" style=\"min-width: 250px;\" class=\"form-control\" type=\"text\">\r\n                                                    </th>\r\n                                                </tr>\r\n                                            </thead>\r\n                                            <tbody>\r\n                                                <tr *ngFor=\"let element of dataSource\">\r\n                                                    <td>\r\n                                                        <div class=\"d-flex  align-items-center justify-content-center\">\r\n                                                            <svg (click)=\"deleteOrder(element?._id)\" class=\"cursor-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                                                fill=\"none\">\r\n                                                                <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.66667\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </svg>\r\n                                                        </div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_ID}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.Service_Type}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Name}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Contact}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Address}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.City}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.State}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Country}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Customer_Zipcode}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.Latitude}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.Longitude}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_Date}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_Start_Time}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Task_End_Time}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\" >{{element?.TAT}}</div>\r\n                                                    </td>\r\n                                                    \r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Payment_Method}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Amount}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.Note}}</div>\r\n                                                    </td>\r\n                                                    <td>\r\n                                                        <div class=\"data\">{{element?.user_ID}}</div>\r\n                                                    </td>\r\n    \r\n                                                \r\n    \r\n                                                </tr>\r\n                                            </tbody>\r\n                                        </table>\r\n    \r\n                                    </div>\r\n                                   \r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container\r\n                                *ngIf=\"(tableApiState | async) === 'loading' || (tableApiState | async) === 'initial'\">\r\n                                <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n                                    <div class=\"shimmer\">\r\n                                        <div class=\"wrapper\">\r\n                                            <div class=\"stroke animate title\"></div>\r\n                                            <div class=\"stroke animate link\"></div>\r\n                                            <div class=\"stroke animate description\"></div>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"shimmer\">\r\n                                        <div class=\"wrapper\">\r\n                                            <div class=\"stroke animate title\"></div>\r\n                                            <div class=\"stroke animate link\"></div>\r\n                                            <div class=\"stroke animate description\"></div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n    \r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    \r\n    </div>\r\n</ng-container>\r\n", styles: [".data{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.data-dark{color:var(--Gray-900, #101828);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.view{color:var(--Primary-700, #009BF3);font-family:Inter;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.rotate{rotate:180deg;transition:1s}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.show-ranges.shown{top:65px!important}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;right:-475px!important;left:unset!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep .md-drppicker table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}\n"] }]
        }], ctorParameters: () => [{ type: i1.TraxService }, { type: i2.ToastService }, { type: i3.PageInfoService }] });
//# sourceMappingURL=data:application/json;base64, 