import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatIcon } from '@angular/material/icon';
import { SimpoComponentModule } from '../../../components/index';
import { TimelineModule } from 'primeng/timeline';
import { BUSINESS_CONSTANTS } from '../../../constants/business.constant';
import { PanelModule } from 'primeng/panel';
import { RatingModule } from 'primeng/rating';
import { FormsModule } from '@angular/forms';
import { BackgroundDirective } from '../../../directive/background-directive';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/events.service";
import * as i2 from "../../../services/storage.service";
import * as i3 from "../../../services/rest.service";
import * as i4 from "primeng/api";
import * as i5 from "../../../services/image-upload-service.service";
import * as i6 from "@angular/common";
import * as i7 from "ngx-skeleton-loader";
import * as i8 from "primeng/timeline";
import * as i9 from "primeng/rating";
import * as i10 from "@angular/forms";
export class OrderDetailsComponent {
    constructor(_eventService, storageService, restService, messageService, imageUploadService) {
        this._eventService = _eventService;
        this.storageService = storageService;
        this.restService = restService;
        this.messageService = messageService;
        this.imageUploadService = imageUploadService;
        this.goBackEmitter = new EventEmitter();
        this.isLoading = false;
        this.orderTimiline = [];
        this.productReview = 0;
        this.sectionsVisible = {
            billDetails: true,
            deliveryDetails: false,
            timeline: false
        };
    }
    ngOnInit() {
        this.styles = this.data?.styles;
        console.log(this.orderDetailData?.brandOrderDetails?.[0]?.timeLineList);
        let timelineList = this.orderDetailData?.brandOrderDetails?.[0]?.timeLineList || [];
        let lastDateIndex = -1;
        timelineList.forEach((t, idx) => {
            if (t.date)
                lastDateIndex = idx;
        });
        this.orderTimiline = timelineList.map((timeline, index) => {
            let statusType = 'future';
            if (timeline.date) {
                if (timeline.orderStatus === 'DELIVERED' || timeline.orderStatus === 'CANCELLED') {
                    statusType = 'completed';
                }
                else {
                    statusType = index === lastDateIndex ? 'active' : 'completed';
                }
            }
            return {
                icon: this.getIcon(timeline.orderStatus),
                name: timeline.title,
                desc: timeline.body,
                date: timeline.date,
                statusType: statusType
            };
        });
        this._eventService.showLoadingScreen.subscribe((response) => {
            this.isLoading = response;
        });
        this.orderDetailData?.brandOrderDetails[0]?.orderedItems?.forEach((item) => {
            if (item?.review?.length > 0)
                item.showReview = true;
            else
                item.showReview = false;
        });
    }
    getIcon(type) {
        switch (type) {
            case "ORDER_PLACED":
            case "ORDER_CONFIRMED":
                return "widgets";
            case "DISPATCHED":
            case "IN_TRANSIT":
            case "OUT_FOR_DELIVERY":
                return "local_shipping";
            case "DELIVERED":
                return "inbox";
            case "CANCELLED":
                return "cancel";
        }
    }
    goBack() {
        this.goBackEmitter.emit();
    }
    getKey(obj) {
        return obj ? Object.keys(obj)[0] : 'N/A';
    }
    get getCardBGColor() {
        return this.getComplementColor(this.styles?.background.color ?? "#00000");
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    getSupportingColor(bgColor) {
        return this.getComplementColor(bgColor);
    }
    getComplementColor(hexColor) {
        if (hexColor.length <= 4)
            hexColor = this.convertHEX(hexColor);
        hexColor = hexColor.replace(/^#/, '');
        let r = parseInt(hexColor.substring(0, 2), 16);
        let g = parseInt(hexColor.substring(2, 4), 16);
        let b = parseInt(hexColor.substring(4, 6), 16);
        r = 255 - r;
        g = 255 - g;
        b = 255 - b;
        let compHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
        return compHex.toUpperCase();
    }
    convertHEX(hexColor) {
        hexColor = hexColor.replace(/^#/, '');
        let color = "#";
        for (let i = 0; i < 3; i++)
            color += (hexColor[i] + hexColor[i + 1]);
        return color;
    }
    get currency() {
        return BUSINESS_CONSTANTS.CURRENCY;
    }
    get canCancelOrder() {
        return this.orderTimiline?.length == 1;
    }
    get orderAddress() {
        return this.orderDetailData?.addressDetails?.addressLine1 + ', ' + this.orderDetailData?.addressDetails?.addressLine2 + ', ' + this.orderDetailData?.addressDetails?.localityName + ', ' + this.orderDetailData?.addressDetails?.cityName + ', ' + this.orderDetailData?.addressDetails?.stateName;
    }
    trackOrder() {
        window.open(this.orderDetailData?.orderTrackingLink, '_blank');
    }
    async submitReview(item) {
        if (!item.rating || item.rating < 1) {
            this.messageService.add({ severity: 'error', summary: 'Review', detail: 'Please give a rating to the product' });
            return;
        }
        if (item.reviewImages) {
            for (let uploadedImage of item.reviewImages) {
                if (uploadedImage.file) {
                    const fileUrl = await this.imageUploadService.uploadFileInAWS(uploadedImage.file, 'library-media');
                    uploadedImage.imgUrl = fileUrl;
                }
            }
        }
        let payload = {
            userId: this.storageService.getUser()?.userId ?? "",
            businessId: localStorage.getItem('businessId') ?? "",
            productId: item.itemId,
            rating: item.rating,
            review: item.review,
            productImages: item.reviewImages,
            orderId: this.orderDetailData?.userOrderId ?? "",
            userName: this.storageService.getUser()?.contact.name
        };
        this.restService.addReviewToProduct(payload).subscribe({
            next: (response) => {
                this.messageService.add({ severity: 'success', summary: 'Review', detail: 'Review Added Successfully' });
            },
            error: (error) => {
                this.messageService.add({ severity: 'error', summary: 'Review', detail: 'Adding Review Caused error' });
            }
        });
    }
    toggleSection(section) {
        this.sectionsVisible[section] = !this.sectionsVisible[section];
    }
    uploadImage(ev, item) {
        const files = ev.target?.files;
        if (!files || files.length === 0) {
            console.warn('No files found in input');
            return;
        }
        // Ensure uploadedImages array exists
        if (!item.reviewImages) {
            item.reviewImages = [];
        }
        for (let fileData of files) {
            const reader = new FileReader();
            reader.onload = (response) => {
                item.reviewImages.push({
                    imgUrl: response.target.result,
                    file: fileData
                });
            };
            reader.onerror = (err) => {
                console.error('FileReader error:', err);
            };
            reader.readAsDataURL(fileData);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, deps: [{ token: i1.EventsService }, { token: i2.StorageServiceService }, { token: i3.RestService }, { token: i4.MessageService }, { token: i5.ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", orderDetailData: "orderDetailData" }, outputs: { goBackEmitter: "goBackEmitter" }, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n        <!-- Main Box -->\r\n        <div class=\"border-0 mx-auto\">\r\n\r\n            <!-- Back button & Thanks -->\r\n            <div class=\"d-flex align-items-center mb-2\">\r\n                <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-chevron-left cp text-muted\">\r\n                    <path d=\"m15 18-6-6 6-6\"></path>\r\n                </svg>\r\n                <span class=\"text-muted fw-medium py-1\">Thanks!</span>\r\n            </div>\r\n\r\n            <!-- Main Headline -->\r\n            <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\r\n                {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\r\n            </h2>\r\n            <p class=\"text-muted mb-3 fs-15\">\r\n                {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\r\n                delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\r\n                was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\r\n            </p>\r\n\r\n            <!-- Colored Line -->\r\n            <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\r\n                [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\r\n            </div>\r\n\r\n            <!-- Order Number & Actions -->\r\n            <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2\">\r\n                <div class=\"fw-semibold text-dark mb-2 mb-md-0 d-flex align-items-center\">\r\n                    Order number:\r\n                    <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\r\n                        {{ orderDetailData?.orderNum }}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Content Grid Layout -->\r\n            <div class=\"row mt-2\">\r\n                <!-- Left Column -->\r\n                <div class=\"col-lg-7 col-xl-8 mb-4\">\r\n                    <!-- Items List -->\r\n                    <div class=\"card border mb-4 overflow-hidden\"\r\n                        style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\r\n                        <ng-container\r\n                            *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\r\n                            <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\r\n                                <div class=\"d-flex gap-3 w-100 align-items-start\">\r\n                                    <!-- Image -->\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n                                        class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\r\n\r\n                                    <!-- Details + Price -->\r\n                                    <div class=\"flex-grow-1 min-w-0\">\r\n                                        <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                                            <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\r\n                                            <!-- Price always visible alongside name -->\r\n                                            <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\r\n                                                <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\r\n                                            </div>\r\n                                        </div>\r\n                                        <p class=\"text-muted small mb-1 item-variant\"\r\n                                            *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n                                            item.variantName || 'Regular' }}</p>\r\n                                        <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\r\n\r\n                                        <!-- Review Section -->\r\n                                        <div class=\"mt-3 pt-3 border-top\"\r\n                                            *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n                                            <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\r\n                                                <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</h6>\r\n                                                <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n                                                    [readonly]=\"false\"\r\n                                                    (ngModelChange)=\"submitReview(item)\"></p-rating>\r\n                                            </div>\r\n\r\n                                            <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\r\n                                                style=\"font-size: 13px;\"\r\n                                                (click)=\"item.showReview = !item.showReview\">\r\n                                                <mat-icon\r\n                                                    style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\r\n                                                <span>Write a Detailed Review</span>\r\n                                            </div>\r\n\r\n                                            <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\r\n                                                <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\r\n\r\n                                                <div class=\"mb-3\">\r\n                                                    <textarea class=\"form-control shadow-none review-textarea w-100\"\r\n                                                        [(ngModel)]=\"item.review\" rows=\"3\"\r\n                                                        placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\r\n                                                </div>\r\n\r\n                                                <div class=\"mb-3\">\r\n                                                    <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n                                                        Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n                                                    </h6>\r\n                                                    <div class=\"d-flex gap-2 flex-wrap align-items-center\">\r\n                                                        <div class=\"position-relative review-img-thumb\"\r\n                                                            *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\r\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\r\n                                                                style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\r\n                                                            <button class=\"review-img-remove\"\r\n                                                                (click)=\"item.reviewImages.splice(imgIdx, 1)\"\r\n                                                                title=\"Remove image\">\r\n                                                                <mat-icon style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\r\n                                                            </button>\r\n                                                        </div>\r\n\r\n                                                        <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\r\n                                                            (click)=\"reviewFileInput.click()\">\r\n                                                            <mat-icon\r\n                                                                style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\r\n                                                        </div>\r\n                                                        <input type=\"file\" name=\"myfile\" multiple hidden\r\n                                                            accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n                                                            (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n                                                            #reviewFileInput />\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <button\r\n                                                    class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\r\n                                                    [style.background]=\"styles?.background?.color || '#20c997'\"\r\n                                                    (click)=\"submitReview(item)\">\r\n                                                    Submit Review\r\n                                                    <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                    </div>\r\n\r\n                    <!-- Summary Section -->\r\n                    <div class=\"row gx-5\">\r\n                        <!-- Left: Address & Payment -->\r\n                        <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\r\n                            <div>\r\n                                <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\r\n                                </h6>\r\n                                <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n                                    <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\r\n                                        }}</span>\r\n                                    <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\r\n                                        {{ orderAddress }}<br>\r\n                                        {{ orderDetailData?.addressDetails?.receiverPhone }}\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div>\r\n                                <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\r\n                                <div class=\"d-flex align-items-center gap-3\">\r\n                                    <span class=\"text-primary fw-bolder fs-5\"\r\n                                        *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\r\n                                        style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\r\n                                    <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\r\n                                        style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\r\n\r\n                                    <div>\r\n                                        <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n                                            {{orderDetailData?.paymentDetails ?\r\n                                            (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n                                            getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\r\n                                        <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\r\n                                            *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Right: Bill Details -->\r\n                        <div class=\"col-md-6 pt-1\">\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\r\n                                <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n                                    number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n                                *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\r\n                                <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\r\n                                    -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n                                    |\r\n                                    number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\r\n                                <span class=\"text-dark fw-medium\"\r\n                                    style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n                                    orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\r\n                                <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n                                    ?\r\n                                    orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                                    orderDetailData?.billDetails?.totalTax\r\n                                    | number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n                                <span style=\"font-size: 13px;\">Reward Amount</span>\r\n                                <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n                                <span  style=\"font-size: 13px;\">Reward Amount</span>\r\n                                <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n                                *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\r\n                                <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n                                    -<span [innerHTML]=\"currency\"></span>{{\r\n                                    orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center\">\r\n                                <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\r\n                                <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n                                <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n                                <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.pointsConvertedINR ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n                                <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n                                <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.voucherValue) }}\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Right Column -->\r\n                <div class=\"col-lg-5 col-xl-4\">\r\n                    <!-- Timeline Card -->\r\n                    <div class=\"card border p-4 mb-4\"\r\n                        style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\r\n                        *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\r\n                        <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\r\n                            <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\r\n                                <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\r\n                            </h5>\r\n\r\n                            <div *ngIf=\"orderDetailData?.orderTrackingLink\"\r\n                                class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\r\n                                [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\r\n                                (click)=\"trackOrder()\">\r\n                                <mat-icon\r\n                                    style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\r\n                                <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\r\n                            <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\r\n                                <ng-template pTemplate=\"marker\" let-event>\r\n                                    <!-- Completed -->\r\n                                    <span class=\"custom-marker completed-marker\"\r\n                                        *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\r\n                                        [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                            <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n                                        </svg>\r\n                                    </span>\r\n\r\n                                    <!-- Active -->\r\n                                    <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\r\n                                        [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\r\n\r\n                                    <!-- Future -->\r\n                                    <span class=\"custom-marker future-marker\"\r\n                                        *ngIf=\"event.statusType === 'future'\"></span>\r\n                                </ng-template>\r\n\r\n                                <ng-template pTemplate=\"content\" let-event let-last=\"last\">\r\n                                    <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\r\n                                        <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\r\n                                            {{\r\n                                            event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\r\n                                        <div style=\"font-size: 14px;\"\r\n                                            [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\r\n                                            {{ event.date ? (event.date | date:'MMM d') : 'Not yet' }}\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </p-timeline>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n    <div class=\"mx-auto\" style=\"max-width: 1000px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '100%',\r\n            height: '60vh',\r\n            'border-radius': '12px',\r\n            'margin': '20px 0'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.DecimalPipe, name: "number" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i9.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i10.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: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OrderDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-order-details', standalone: true, imports: [
                        CommonModule,
                        SimpoComponentModule,
                        TimelineModule,
                        MatIcon,
                        PanelModule,
                        RatingModule,
                        FormsModule,
                        BackgroundDirective,
                        MatTooltipModule
                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div class=\"container-fluid\" [attr.style]=\"customClass\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n        <!-- Main Box -->\r\n        <div class=\"border-0 mx-auto\">\r\n\r\n            <!-- Back button & Thanks -->\r\n            <div class=\"d-flex align-items-center mb-2\">\r\n                <svg (click)=\"goBack()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-chevron-left cp text-muted\">\r\n                    <path d=\"m15 18-6-6 6-6\"></path>\r\n                </svg>\r\n                <span class=\"text-muted fw-medium py-1\">Thanks!</span>\r\n            </div>\r\n\r\n            <!-- Main Headline -->\r\n            <h2 class=\"fw-semibold mb-2 text-dark\" style=\"font-size: 1.75rem;\">\r\n                {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus?.replaceAll(\"_\", \" \") | titlecase }} \uD83D\uDE80\r\n            </h2>\r\n            <p class=\"text-muted mb-3 fs-15\">\r\n                {{ orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'DELIVERED' ? 'Your order has been\r\n                delivered. Enjoy!' : (orderDetailData?.brandOrderDetails?.[0]?.orderStatus === 'CANCELLED' ? 'Your order\r\n                was cancelled.' : 'Your order is on the way. It will be shipped. We will inform you.') }}\r\n            </p>\r\n\r\n            <!-- Colored Line -->\r\n            <div class=\"mb-3\" style=\"height: 3px; width: 100%;\"\r\n                [style.background]=\"'linear-gradient(to right, ' + (styles?.background?.color || '#20c997') + ', transparent)'\">\r\n            </div>\r\n\r\n            <!-- Order Number & Actions -->\r\n            <div class=\"d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-2\">\r\n                <div class=\"fw-semibold text-dark mb-2 mb-md-0 d-flex align-items-center\">\r\n                    Order number:\r\n                    <span class=\"ms-1\" [style.color]=\"styles?.background?.color || '#20c997'\">\r\n                        {{ orderDetailData?.orderNum }}\r\n                    </span>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Content Grid Layout -->\r\n            <div class=\"row mt-2\">\r\n                <!-- Left Column -->\r\n                <div class=\"col-lg-7 col-xl-8 mb-4\">\r\n                    <!-- Items List -->\r\n                    <div class=\"card border mb-4 overflow-hidden\"\r\n                        style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\">\r\n                        <ng-container\r\n                            *ngFor=\"let item of orderDetailData?.brandOrderDetails[0]?.orderedItems; let last = last\">\r\n                            <div class=\"item-card-pad\" [ngClass]=\"{'border-bottom': !last}\">\r\n                                <div class=\"d-flex gap-3 w-100 align-items-start\">\r\n                                    <!-- Image -->\r\n                                    <img loading=\"lazy\"\r\n                                        onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                                        [src]=\"item.imgUrl\" alt=\"{{ item.itemName }}\"\r\n                                        class=\"rounded shadow-sm flex-shrink-0 item-thumb\">\r\n\r\n                                    <!-- Details + Price -->\r\n                                    <div class=\"flex-grow-1 min-w-0\">\r\n                                        <div class=\"d-flex align-items-start justify-content-between gap-2\">\r\n                                            <h6 class=\"fw-bold text-dark mb-1 item-name\">{{ item.itemName }}</h6>\r\n                                            <!-- Price always visible alongside name -->\r\n                                            <div class=\"fw-bold text-dark text-nowrap item-price flex-shrink-0\">\r\n                                                <span [innerHTML]=\"currency\"></span>{{ (item.sellingPrice * item.quantity) | number:'1.0-2' }}\r\n                                            </div>\r\n                                        </div>\r\n                                        <p class=\"text-muted small mb-1 item-variant\"\r\n                                            *ngIf=\"item.variantName || item.customizationDetails\">{{\r\n                                            item.variantName || 'Regular' }}</p>\r\n                                        <div class=\"text-muted item-qty\">Qty: {{ item.quantity }}</div>\r\n\r\n                                        <!-- Review Section -->\r\n                                        <div class=\"mt-3 pt-3 border-top\"\r\n                                            *ngIf=\"orderDetailData?.brandOrderDetails?.[0]?.orderStatus == 'DELIVERED'\">\r\n\r\n                                            <div class=\"d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between mb-2 gap-2\">\r\n                                                <h6 class=\"fw-bold mb-0 text-dark\" style=\"font-size: 14px;\">Leave a Review</h6>\r\n                                                <p-rating [(ngModel)]=\"item.rating\" [cancel]=\"false\"\r\n                                                    [readonly]=\"false\"\r\n                                                    (ngModelChange)=\"submitReview(item)\"></p-rating>\r\n                                            </div>\r\n\r\n                                            <div class=\"add-detail-review text-primary fw-medium cursor-pointer d-inline-flex align-items-center gap-1\"\r\n                                                style=\"font-size: 13px;\"\r\n                                                (click)=\"item.showReview = !item.showReview\">\r\n                                                <mat-icon\r\n                                                    style=\"font-size: 15px; width: 15px; height: 15px;\">mode_edit</mat-icon>\r\n                                                <span>Write a Detailed Review</span>\r\n                                            </div>\r\n\r\n                                            <div *ngIf=\"item.showReview\" class=\"mt-3 review-form-box\">\r\n                                                <h6 class=\"fw-semibold text-dark mb-2\" style=\"font-size: 14px;\">Share your experience</h6>\r\n\r\n                                                <div class=\"mb-3\">\r\n                                                    <textarea class=\"form-control shadow-none review-textarea w-100\"\r\n                                                        [(ngModel)]=\"item.review\" rows=\"3\"\r\n                                                        placeholder=\"What did you like or dislike? How was the fit and quality?\"></textarea>\r\n                                                </div>\r\n\r\n                                                <div class=\"mb-3\">\r\n                                                    <h6 class=\"fw-medium text-muted mb-2\" style=\"font-size: 13px;\">\r\n                                                        Attach Photos <span style=\"font-size: 11px; opacity: 0.7;\">(Optional)</span>\r\n                                                    </h6>\r\n                                                    <div class=\"d-flex gap-2 flex-wrap align-items-center\">\r\n                                                        <div class=\"position-relative review-img-thumb\"\r\n                                                            *ngFor=\"let img of item?.reviewImages ?? []; let imgIdx = index\">\r\n                                                            <img [src]=\"img.imgUrl\" alt=\"\"\r\n                                                                style=\"width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0;\">\r\n                                                            <button class=\"review-img-remove\"\r\n                                                                (click)=\"item.reviewImages.splice(imgIdx, 1)\"\r\n                                                                title=\"Remove image\">\r\n                                                                <mat-icon style=\"font-size: 12px; width: 12px; height: 12px; line-height: 12px;\">close</mat-icon>\r\n                                                            </button>\r\n                                                        </div>\r\n\r\n                                                        <div class=\"d-flex align-items-center justify-content-center cursor-pointer review-upload-box\"\r\n                                                            (click)=\"reviewFileInput.click()\">\r\n                                                            <mat-icon\r\n                                                                style=\"font-size: 22px; width: 22px; height: 22px;\">add_photo_alternate</mat-icon>\r\n                                                        </div>\r\n                                                        <input type=\"file\" name=\"myfile\" multiple hidden\r\n                                                            accept=\"image/jpg,image/jpeg,image/gif,image/png,application/pdf,image/x-eps\"\r\n                                                            (change)=\"uploadImage($event, item)\" class=\"pc-btn\"\r\n                                                            #reviewFileInput />\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                                <button\r\n                                                    class=\"btn w-100 fw-bold d-flex justify-content-center align-items-center gap-2 review-submit-btn\"\r\n                                                    [style.background]=\"styles?.background?.color || '#20c997'\"\r\n                                                    (click)=\"submitReview(item)\">\r\n                                                    Submit Review\r\n                                                    <mat-icon style=\"font-size: 18px; width: 18px; height: 18px;\">send</mat-icon>\r\n                                                </button>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n\r\n                    </div>\r\n\r\n                    <!-- Summary Section -->\r\n                    <div class=\"row gx-5\">\r\n                        <!-- Left: Address & Payment -->\r\n                        <div class=\"col-md-6 mb-4 mb-md-0 d-flex flex-column gap-4\">\r\n                            <div>\r\n                                <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Shipping Address\r\n                                </h6>\r\n                                <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n                                    <span class=\"d-block mb-1\">{{ orderDetailData?.addressDetails?.receiverName\r\n                                        }}</span>\r\n                                    <span class=\"text-muted d-block\" style=\"line-height: 1.5; max-width: 280px;\">\r\n                                        {{ orderAddress }}<br>\r\n                                        {{ orderDetailData?.addressDetails?.receiverPhone }}\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div>\r\n                                <h6 class=\"text-dark mb-2\" style=\"font-size: 13px; font-weight: 600;\">Payment</h6>\r\n                                <div class=\"d-flex align-items-center gap-3\">\r\n                                    <span class=\"text-primary fw-bolder fs-5\"\r\n                                        *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\"\r\n                                        style=\"font-family: Arial, sans-serif; letter-spacing: -0.5px;\">VISA</span>\r\n                                    <mat-icon *ngIf=\"getKey(orderDetailData?.paymentDetails)==='COD'\" class=\"text-muted\"\r\n                                        style=\"font-size: 28px; width: 28px; height: 28px;\">payments</mat-icon>\r\n\r\n                                    <div>\r\n                                        <div class=\"text-dark\" style=\"font-size: 13px;\">\r\n                                            {{orderDetailData?.paymentDetails ?\r\n                                            (getKey(orderDetailData?.paymentDetails)==='COD' ? 'Cash on Delivery':\r\n                                            getKey(orderDetailData?.paymentDetails) ) : 'N/A'}}</div>\r\n                                        <div class=\"text-muted\" style=\"font-size: 12px; letter-spacing: 0.5px;\"\r\n                                            *ngIf=\"getKey(orderDetailData?.paymentDetails)!=='COD'\">**** **** **** 1234\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Right: Bill Details -->\r\n                        <div class=\"col-md-6 pt-1\">\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Subtotal</span>\r\n                                <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.totalNetValue |\r\n                                    number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n                                *ngIf=\"orderDetailData?.billDetails?.discountAmount\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Discount</span>\r\n                                <span class=\"text-success fw-medium\" style=\"font-size: 13px;\">\r\n                                    -<span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n                                    |\r\n                                    number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Shipping</span>\r\n                                <span class=\"text-dark fw-medium\"\r\n                                    style=\"font-size: 13px;\">{{orderDetailData?.billDetails.deliveryCharges ?\r\n                                    orderDetailData?.billDetails.deliveryCharges : 'FREE'}}</span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Estimated Tax</span>\r\n                                <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.discountAmount\r\n                                    ?\r\n                                    orderDetailData?.billDetails?.totalTaxAfterDiscount :\r\n                                    orderDetailData?.billDetails?.totalTax\r\n                                    | number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n                                <span style=\"font-size: 13px;\">Reward Amount</span>\r\n                                <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.pointsConvertedINR }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2 text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n                                <span  style=\"font-size: 13px;\">Reward Amount</span>\r\n                                <span class=\" fw-medium\" style=\"font-size: 13px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData.voucherValue }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center mb-2\"\r\n                                *ngIf=\"orderDetailData?.billDetails?.orraSchemeRedeemedAmount\">\r\n                                <span class=\"text-muted\" style=\"font-size: 13px;\">Redeem Amount</span>\r\n                                <span class=\"text-dark fw-medium\" style=\"font-size: 13px;\">\r\n                                    -<span [innerHTML]=\"currency\"></span>{{\r\n                                    orderDetailData?.billDetails?.orraSchemeRedeemedAmount | number:'1.0-2' }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <hr class=\"text-muted my-3\" style=\"opacity: 0.15;\">\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center\">\r\n                                <span class=\"text-dark\" style=\"font-size: 14px; font-weight: 600;\">Total</span>\r\n                                <span class=\"text-dark fw-bold\" style=\"font-size: 16px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'REWARD_POINTS'\">\r\n                                <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n                                <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.pointsConvertedINR ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.pointsConvertedINR) }}\r\n                                </span>\r\n                            </div>\r\n\r\n                            <div class=\"d-flex justify-content-between align-items-center text-success\" *ngIf=\"orderDetailData?.rewardUsed === 'VOUCHER'\">\r\n                                <span style=\"font-size: 14px; font-weight: 600;\">Amount Paid</span>\r\n                                <span class=\"fw-bold\" style=\"font-size: 16px;\">\r\n                                    <span [innerHTML]=\"currency\"></span>{{ orderDetailData?.billDetails?.finalPrice === orderDetailData?.voucherValue ? '0' : (orderDetailData?.billDetails?.finalPrice - orderDetailData?.voucherValue) }}\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <!-- Right Column -->\r\n                <div class=\"col-lg-5 col-xl-4\">\r\n                    <!-- Timeline Card -->\r\n                    <div class=\"card border p-4 mb-4\"\r\n                        style=\"border-color: #eaeaea !important; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.02);\"\r\n                        *ngIf=\"orderDetailData?.orderTrackingLink || (orderTimiline && orderTimiline.length > 0)\">\r\n                        <div class=\"d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom\">\r\n                            <h5 class=\"fw-bold mb-0 text-dark d-flex align-items-center gap-2\" style=\"font-size: 16px;\">\r\n                                <mat-icon style=\"color: #6c757d;\">timeline</mat-icon> Order Timeline\r\n                            </h5>\r\n\r\n                            <div *ngIf=\"orderDetailData?.orderTrackingLink\"\r\n                                class=\"d-inline-flex align-items-center gap-1 cursor-pointer fw-medium\"\r\n                                [style.color]=\"styles?.background?.color || '#0d6efd'\" style=\"font-size: 13px;\"\r\n                                (click)=\"trackOrder()\">\r\n                                <mat-icon\r\n                                    style=\"font-size: 15px; width: 15px; height: 15px;\">location_searching</mat-icon>\r\n                                <span style=\"text-decoration: underline; text-underline-offset: 3px;\">Track Order</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"px-2 pt-2\" *ngIf=\"orderTimiline && orderTimiline.length > 0\">\r\n                            <p-timeline [value]=\"orderTimiline\" styleClass=\"custom-timeline\" align=\"left\">\r\n                                <ng-template pTemplate=\"marker\" let-event>\r\n                                    <!-- Completed -->\r\n                                    <span class=\"custom-marker completed-marker\"\r\n                                        *ngIf=\"event.statusType === 'completed' || event.statusType === 'delivered'\"\r\n                                        [style.backgroundColor]=\"styles?.background?.color || '#059669'\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                            viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                            <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n                                        </svg>\r\n                                    </span>\r\n\r\n                                    <!-- Active -->\r\n                                    <span class=\"custom-marker active-marker\" *ngIf=\"event.statusType === 'active'\"\r\n                                        [style.borderColor]=\"styles?.background?.color || '#059669'\"></span>\r\n\r\n                                    <!-- Future -->\r\n                                    <span class=\"custom-marker future-marker\"\r\n                                        *ngIf=\"event.statusType === 'future'\"></span>\r\n                                </ng-template>\r\n\r\n                                <ng-template pTemplate=\"content\" let-event let-last=\"last\">\r\n                                    <div class=\"ms-4\" [ngClass]=\"{'pb-4': !last}\">\r\n                                        <div class=\"fw-semibold text-dark\" style=\"font-size: 15px; margin-bottom: 2px;\">\r\n                                            {{\r\n                                            event.name?.replaceAll(\"_\", \" \") | titlecase }}</div>\r\n                                        <div style=\"font-size: 14px;\"\r\n                                            [ngClass]=\"{'text-muted': event.statusType !== 'future', 'text-light-grey': event.statusType === 'future'}\">\r\n                                            {{ event.date ? (event.date | date:'MMM d') : 'Not yet' }}\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </p-timeline>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- Loading Skeleton -->\r\n<div class=\"container-fluid py-4\" *ngIf=\"isLoading\" style=\"background-color: #f8f9fa; min-height: 100vh;\">\r\n    <div class=\"mx-auto\" style=\"max-width: 1000px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '100%',\r\n            height: '60vh',\r\n            'border-radius': '12px',\r\n            'margin': '20px 0'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n</div>", styles: [".right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-10px;height:55px;left:12px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.add-review-img{color:#828484;width:65px;display:flex;align-items:center;justify-content:center;order:3px dotted black;background:#f0f2f2;border:1px solid #d5d9d9!important;cursor:pointer}.order-status{border-radius:8px;padding:5px 8px;font-size:16px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.fs-15{font-size:15px}.review-textarea{border:1px solid #e2e8f0;border-radius:8px;font-size:14px;resize:none;background-color:#f8fafc;padding:12px 8px;transition:all .2s ease-in-out}.review-textarea:focus{border-color:#cbd5e1;background-color:#fff;box-shadow:0 0 0 3px #e2e8f080!important;outline:none}.review-upload-box{width:72px;height:72px;border:2px dashed #cbd5e1;border-radius:8px;background-color:#f8fafc;transition:all .2s ease-in-out;color:#64748b}.review-img-thumb{display:inline-block}.review-img-remove{position:absolute;top:-6px;right:-6px;width:18px!important;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px #0000002e;transition:background .15s ease,transform .15s ease;z-index:1}.review-img-remove:hover{background:#dc2626;transform:scale(1.1)}.review-upload-box:hover{background-color:#f1f5f9;border-color:#94a3b8;color:#475569}.review-submit-btn{color:#fff!important;border-radius:8px;padding:12px 0;font-size:14px!important;border:none;letter-spacing:.3px;transition:transform .1s ease,box-shadow .2s ease}.review-submit-btn:hover{box-shadow:0 6px 15px #0000001a;transform:translateY(-1px)}.review-submit-btn:active{transform:translateY(1px)}::ng-deep .custom-timeline .custom-marker{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;z-index:10}::ng-deep .custom-timeline .active-marker{background-color:#fff!important;border-width:6px!important;border-style:solid!important}::ng-deep .custom-timeline .future-marker{background-color:#fff!important;border:5px solid #cbd5e1!important}::ng-deep .custom-timeline .p-timeline-event-marker{border:none!important;background:transparent!important;display:flex!important}::ng-deep .custom-timeline .p-timeline-event-connector{background-color:#cbd5e1!important;width:2px!important}::ng-deep .custom-timeline .p-timeline-event-opposite{display:none!important;flex:0!important;padding:0!important}::ng-deep .custom-timeline .p-timeline-event{min-height:50px}.text-light-grey{color:#94a3b8}.w-40{width:40%}@media (min-width: 576px){.w-sm-40{width:40%!important}}.item-card-pad{padding:16px 20px}.item-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px}.item-name{font-size:14px;line-height:1.4}.item-price{font-size:14px}.item-variant,.item-qty{font-size:12px}.min-w-0{min-width:0}.review-form-box{background:#fff;border:1px solid #f0f0f0;border-radius:12px;padding:14px;box-shadow:0 4px 20px #00000008;overflow:hidden}@media (max-width: 575px){.container-fluid{padding-left:12px!important;padding-right:12px!important}.item-card-pad{padding:12px 14px}.item-thumb{width:60px;height:60px}.item-name,.item-price{font-size:13px}::ng-deep .p-rating-icon{font-size:1.35rem!important;padding:2px!important}.row.gx-5{--bs-gutter-x: 1rem !important}h2.fw-semibold{font-size:1.4rem!important}}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }, { type: i2.StorageServiceService }, { type: i3.RestService }, { type: i4.MessageService }, { type: i5.ImageUplaodService }], propDecorators: { responseData: [{
                type: Input
            }], data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }], orderDetailData: [{
                type: Input,
                args: ["orderDetailData"]
            }], goBackEmitter: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 