import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { BUSINESS_CONSTANTS } from '../../constants/business.constant';
import { CommonModule } from '@angular/common';
import { SimpoComponentModule } from '../../components/index';
import { TimelineModule } from 'primeng/timeline';
import * as i0 from "@angular/core";
import * as i1 from "../../services/rest.service";
import * as i2 from "../../services/storage.service";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/common";
import * as i5 from "ngx-skeleton-loader";
import * as i6 from "primeng/timeline";
import * as i7 from "primeng/api";
export class ListHomeAppointmentComponent {
    constructor(restService, storageService) {
        this.restService = restService;
        this.storageService = storageService;
        this.sectionsVisible = {
            billDetails: true,
            deliveryDetails: false,
            timeline: false
        };
        this.currentTab = 'BOOKING_LIST';
        this.orderTimiline = [
            {
                "brandOrderId": "1f0692b5-bc37-6aef-9797-33718ca9034d",
                "userOrderId": "1f0692b5-bc24-626e-9797-21dfaac3c452",
                "businessId": "1f05f085-d865-6bc5-82b4-0570667d6f5e",
                "title": "Order Created",
                "body": "Order #CAR009 Created on 25-07-2025",
                "date": "2025-07-25T07:45:39.256+00:00",
                "orderStatus": "ORDER_PLACED",
                "timelineFor": "ORDER"
            }
        ];
        this.homeAppointmentList = [];
    }
    ngOnInit() {
        this.getHomeAppointmentList();
    }
    getHomeAppointmentList() {
        const user = this.storageService.getUser();
        // const user = {userId: '5ad40df5-6005-401d-9223-24d336acfddf'}
        this.restService.getHomeAppointmentList(user?.userId ?? '').subscribe((res) => {
            this.homeAppointmentList = res.data;
        });
    }
    getIcon(type) {
        switch (type) {
            case "PENDING":
            case "CONFIRMED":
                return "widgets";
            case "NO_SHOW":
                return "local_shipping";
            case "COMPLETED":
                return "inbox";
            case "CANCELLED":
                return "cancel";
        }
    }
    toggleSection(section) {
        this.sectionsVisible[section] = !this.sectionsVisible[section];
    }
    get currency() {
        return BUSINESS_CONSTANTS.CURRENCY;
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    viewBookingDetail(appointmentDetail) {
        this.currentTab = 'BOOKING_DETAIL';
        this.appointmentDetails = appointmentDetail;
        this.orderTimiline = this.appointmentDetails?.timeLineList?.map((timeline) => {
            return {
                icon: this.getIcon(timeline.appointmentStatus),
                name: timeline.title,
                desc: timeline.body,
                status: timeline.appointmentStatus
            };
        });
    }
    backToAppointmentList() {
        this.currentTab = 'BOOKING_LIST';
        this.appointmentDetails = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListHomeAppointmentComponent, deps: [{ token: i1.RestService }, { token: i2.StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListHomeAppointmentComponent, isStandalone: true, selector: "simpo-list-home-appointment", ngImport: i0, template: "<section>\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\n    <div *ngIf=\"homeAppointmentList.length == 0\">\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\n    </div>\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\n  </div>\n</section>\n<ng-template #appointmentCard let-appointment=\"data\">\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\n    <div class=\"card-body p-3\">\n      <!-- Header Section -->\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\n        <div class=\"order-number\">\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\n        </div>\n        <div class=\"arrow-icon\">\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n        </div>\n      </div>\n      <!-- Middle Section -->\n      <div class=\"order-details\">\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\n          <span class=\"text-muted small mb-3 mb-sm-0\">\n            {{appointment.time}} {{appointment.date}}\n          </span>\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <!-- <div class=\"amount-section\">\n          <span class=\"h5 mb-0 text-success fw-bold\">\n            <span [innerHTML]=\"currency\"></span>\n            123\n          </span>\n        </div> -->\n        <div class=\"status-section\">\n          <span [attr.class]=\"appointment.status + ' order-status'\">\n            {{appointment.status.replaceAll('_', ' ')}}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #BookingDetail>\n  <ng-container>\n    <div class=\"container-fluid\">\n\n      <!-- Header Section -->\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <div class=\"d-flex align-items-center gap-3\">\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\n          </div>\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\n            </span>\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n              <small>{{appointmentDetails?.items?.length ?? 0}}\n                items</small>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Header -->\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\n          <div></div>\n        </div>\n      </div> -->\n\n      <div class=\"row g-4\">\n        <!-- Left Column -->\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n          <!-- Timeline for Desktop -->\n\n          <!-- Items Section -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                <mat-icon>shopping_cart</mat-icon>\n                Items\n              </h4>\n            </div>\n            <div class=\"card-body p-4 scroll-45\">\n              <div class=\"row g-3\">\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\n                  <div class=\"item\">\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\n                      NO IMAGE<br>AVAILABLE\n                    </div>\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\n                    <div class=\"item-details\">\n                      <div class=\"item-name\">{{item.itemName}}</div>\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\n                      <!-- <div class=\"item-meta\">\n                            <span>SKU: TST-001</span>\n                            <span>Qty: 1</span>\n                            <span>Weight: 2.5 lbs</span>\n                        </div> -->\n                    </div>\n                    <div class=\"item-price\">\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeline for Mobile -->\n          <!-- <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n          </ng-container> -->\n        </div>\n\n        <!-- Right Column -->\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n          <!-- Bill Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>receipt</mat-icon>\n                  Bill Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Free Trial\n                </span>\n                <span class=\"fw-semibold text-success h6 mb-0\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Service Charge\n                </span>\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\n                <span class=\"fw-bold h4 mb-0 fs-1\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Customer Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>person</mat-icon>\n                  Customer Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Name</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Phone</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Address</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\n                      {{appointmentDetails.addressDetails.stateName}}</span>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n\n          <!-- Timeline Section for Desktop -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>timeline</mat-icon>\n                  Order Timeline\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n              <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                      style=\"width: 40px; height: 40px;\">\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                        event.icon }}</mat-icon>\n                    </div>\n                    <div class=\"flex-grow-1\">\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-timeline>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Timeline Template -->\n  <ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n          <mat-icon>timeline</mat-icon>\n          Order Timeline\n        </h4>\n      </div>\n      <div class=\"card-body p-4\">\n        <p-timeline [value]=\"orderTimiline\">\n          <ng-template pTemplate=\"content\" let-event>\n            <div class=\"d-flex align-items-start gap-3 py-3\">\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                style=\"width: 40px; height: 40px;\">\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                  event.icon }}</mat-icon>\n              </div>\n              <div class=\"flex-grow-1\">\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                </h6>\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n              </div>\n            </div>\n          </ng-template>\n        </p-timeline>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Loading Skeleton -->\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #showEmptyScreen>\n  <section class=\"empty-cart m-auto\">\n    <div>\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n          >\n      </div>\n      <div class=\"cart-text \">\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\n            <div class=\"heading-medium\">No Booked Appointment</div>\n          </div>\n        <!-- </ng-container> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.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:-20px;height:55px;left:18px}.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}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i5.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i6.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListHomeAppointmentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-list-home-appointment', standalone: true, imports: [MatIconModule, CommonModule, SimpoComponentModule, TimelineModule], template: "<section>\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\n    <div *ngIf=\"homeAppointmentList.length == 0\">\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\n    </div>\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\n  </div>\n</section>\n<ng-template #appointmentCard let-appointment=\"data\">\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\n    <div class=\"card-body p-3\">\n      <!-- Header Section -->\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\n        <div class=\"order-number\">\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\n        </div>\n        <div class=\"arrow-icon\">\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n        </div>\n      </div>\n      <!-- Middle Section -->\n      <div class=\"order-details\">\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\n          <span class=\"text-muted small mb-3 mb-sm-0\">\n            {{appointment.time}} {{appointment.date}}\n          </span>\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <!-- <div class=\"amount-section\">\n          <span class=\"h5 mb-0 text-success fw-bold\">\n            <span [innerHTML]=\"currency\"></span>\n            123\n          </span>\n        </div> -->\n        <div class=\"status-section\">\n          <span [attr.class]=\"appointment.status + ' order-status'\">\n            {{appointment.status.replaceAll('_', ' ')}}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #BookingDetail>\n  <ng-container>\n    <div class=\"container-fluid\">\n\n      <!-- Header Section -->\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <div class=\"d-flex align-items-center gap-3\">\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\n          </div>\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\n            </span>\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n              <small>{{appointmentDetails?.items?.length ?? 0}}\n                items</small>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Header -->\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\n          <div></div>\n        </div>\n      </div> -->\n\n      <div class=\"row g-4\">\n        <!-- Left Column -->\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n          <!-- Timeline for Desktop -->\n\n          <!-- Items Section -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                <mat-icon>shopping_cart</mat-icon>\n                Items\n              </h4>\n            </div>\n            <div class=\"card-body p-4 scroll-45\">\n              <div class=\"row g-3\">\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\n                  <div class=\"item\">\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\n                      NO IMAGE<br>AVAILABLE\n                    </div>\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\n                    <div class=\"item-details\">\n                      <div class=\"item-name\">{{item.itemName}}</div>\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\n                      <!-- <div class=\"item-meta\">\n                            <span>SKU: TST-001</span>\n                            <span>Qty: 1</span>\n                            <span>Weight: 2.5 lbs</span>\n                        </div> -->\n                    </div>\n                    <div class=\"item-price\">\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeline for Mobile -->\n          <!-- <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n          </ng-container> -->\n        </div>\n\n        <!-- Right Column -->\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n          <!-- Bill Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>receipt</mat-icon>\n                  Bill Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Free Trial\n                </span>\n                <span class=\"fw-semibold text-success h6 mb-0\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Service Charge\n                </span>\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\n                <span class=\"fw-bold h4 mb-0 fs-1\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Customer Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>person</mat-icon>\n                  Customer Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Name</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Phone</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Address</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\n                      {{appointmentDetails.addressDetails.stateName}}</span>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n\n          <!-- Timeline Section for Desktop -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>timeline</mat-icon>\n                  Order Timeline\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n              <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                      style=\"width: 40px; height: 40px;\">\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                        event.icon }}</mat-icon>\n                    </div>\n                    <div class=\"flex-grow-1\">\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-timeline>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Timeline Template -->\n  <ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n          <mat-icon>timeline</mat-icon>\n          Order Timeline\n        </h4>\n      </div>\n      <div class=\"card-body p-4\">\n        <p-timeline [value]=\"orderTimiline\">\n          <ng-template pTemplate=\"content\" let-event>\n            <div class=\"d-flex align-items-start gap-3 py-3\">\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                style=\"width: 40px; height: 40px;\">\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                  event.icon }}</mat-icon>\n              </div>\n              <div class=\"flex-grow-1\">\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                </h6>\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n              </div>\n            </div>\n          </ng-template>\n        </p-timeline>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Loading Skeleton -->\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #showEmptyScreen>\n  <section class=\"empty-cart m-auto\">\n    <div>\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n          >\n      </div>\n      <div class=\"cart-text \">\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\n            <div class=\"heading-medium\">No Booked Appointment</div>\n          </div>\n        <!-- </ng-container> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.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:-20px;height:55px;left:18px}.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}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"] }]
        }], ctorParameters: () => [{ type: i1.RestService }, { type: i2.StorageServiceService }] });
//# sourceMappingURL=data:application/json;base64, 