import { Component, Input } from '@angular/core';
import BaseSection from '../../../sections/BaseSection';
import { CommonModule } from '@angular/common';
import { AnimationDirective } from '../../../directive/animation-directive';
import { BackgroundDirective } from '../../../directive/background-directive';
import { SimpoComponentModule } from '../../../components/index';
import { HoverDirective } from '../../../directive/hover-element-directive';
import { ButtonDirectiveDirective } from '../../../directive/button-directive.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { ContentFitDirective } from '../../../directive/content-fit-directive';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ButtonEditorDirective } from '../../../directive/button-editor.directive';
import { ColorDirective } from '../../../directive/color.directive';
import { SpacingHorizontalDirective } from '../../../directive/spacing-horizontal.directive';
import { CornerDirective } from '../../../directive/corner-directive';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/rest.service";
import * as i2 from "@angular/router";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "../../../components/hover-elements/hover-elements.component";
import * as i6 from "../../../components/delete-hover-element/delete-hover-element.component";
import * as i7 from "ngx-skeleton-loader";
export class StoreListComponent extends BaseSection {
    constructor(restService, router) {
        super();
        this.restService = restService;
        this.router = router;
        this.edit = true;
        this.pageNo = 0;
        this.isLoading = false;
        this.cardSize = 50;
        this.storesList = [];
        this.storePayload = {
            businessId: localStorage.getItem('businessId') ?? "1f05f085-d865-6bc5-82b4-0570667d6f5e",
            pageNo: 0,
            pageSize: 15
        };
        this.showMessage = false;
        this.totalCount = 0;
        this.submit = false;
        this.loader = false;
        this.error = false;
        this.showState = true;
        this.selectedState = "";
    }
    ngOnInit() {
        this.styles = this.data?.styles;
        this.button = this.data?.action?.buttons[0];
        this.pincode = localStorage.getItem('pincode') ?? "";
        if (this.pincode?.toString().length == 6) {
            this.getDataWithPincode();
        }
        this.getStoreDetails();
    }
    getDataWithPincode() {
        if (this.pincode.toString().length != 6) {
            this.error = true;
            return;
        }
        this.storePayload.pincode = this.pincode;
        this.getStoreDetails();
    }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    getStoreDetails() {
        this.submit = true;
        this.loader = true;
        this.restService.getAllStores(this.storePayload).subscribe((res) => {
            this.storesList = res?.data?.data;
            this.storesList.forEach((store) => {
                store.star = Math.floor(Math.random() * 9) + 1;
                store.reviewCount = Math.floor(Math.random() * (500 - 100 + 1)) + 100;
            });
            this.totalCount = res?.data?.count;
            this.stateList = res?.data?.stateDetails;
            if (this.pincode?.toString().length == 6)
                this.showMessage = res?.data?.storePresent;
            this.storePayload.pageNo++;
            this.isLoading = false;
            this.loader = false;
        }, (error) => {
            this.loader = false;
        });
    }
    setStateData(stateData) {
        this.storesList = stateData?.storeList;
        this.showState = false;
    }
    getTextColor(bgColor) {
        if (bgColor) {
            const threshold = 130; // Adjust this threshold as needed
            const r = parseInt(bgColor.slice(1, 3), 16);
            const g = parseInt(bgColor.slice(3, 5), 16);
            const b = parseInt(bgColor.slice(5, 7), 16);
            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
            return brightness > threshold ? '#000000' : '#ffffff';
        }
        return "#ffffff;";
    }
    openWhatsapp(phone) {
        if (phone) {
            const whatsappUrl = `https://wa.me/${phone}`;
            window.open(whatsappUrl, '_blank');
        }
    }
    viewStore(storeId) {
        this.router.navigate(['/store'], { queryParams: { storeId: storeId } });
    }
    getTime(storeHours, type) {
        if (!storeHours || storeHours?.length == 0)
            return;
        const today = new Date();
        const dayName = today.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
        for (let ele of Object.keys(storeHours)) {
            if (ele == dayName) {
                if (type == 'OPEN') {
                    return storeHours[ele].openingTime;
                }
                else {
                    return storeHours[ele].closingTime;
                }
            }
        }
    }
    getRGBA(bgColor, opacity) {
        const r = parseInt(bgColor.slice(1, 3), 16);
        const g = parseInt(bgColor.slice(3, 5), 16);
        const b = parseInt(bgColor.slice(5, 7), 16);
        return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, deps: [{ token: i1.RestService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\n            <ng-container *ngIf=\"!loader\">\n                <div class=\"store-header mb-3\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\n                    pincode :\n                    \"Find a Store Near You\"}}\n                </div>\n                <div class=\"sub-text\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\n                    totalCount\n                    + ' stores in this locality, scroll down to view the stores\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\n                    and\n                    we look forward to serving you.' }}\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '3vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n                <div class=\"sub-text w-75\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '2vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\n                [class.error-border]=\"error\">\n                <div class=\"d-flex align-items-center w-90\">\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\n                    </div>\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\n                        [style.backgroundColor]=\"'#ffffff'\"\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\n                </div>\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\n            </div>\n            <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\n                (Ex:500088)</span>\n        </div>\n        <div class=\"bottom-container row  mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\n            [id]=\"data?.id\">\n            <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\n                <ng-container *ngFor=\"let state of stateList; let i = index\">\n                    <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\n                        <ng-container *ngIf=\"state?.stateImage; else noImage\">\n                            <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\n                        </ng-container>\n                        <ng-template #noImage>\n                            <img class=\"w-100 h-75\"\n                                src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\n                        </ng-template>\n                        <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\n                        <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\n            </div>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text w-100 text-center\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '6vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\n                submit &&\n                showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\n                \"Showing All Stores\"}}</div>\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\n                <div class=\"row d-flex\">\n                    <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                        *ngFor=\"let ele of storesList; let i = index\">\n                        <div class=\"card-body position-relative d-flex flex-column  h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                            <!-- Content -->\n                            <div class=\"h-100  p-3 pb-0\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\n                                        <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\n                                        <div class=\"f-11\">\n                                            \u2B504.{{ele?.star}} &nbsp;&#x2022;&nbsp;{{ele?.reviewCount}}&nbsp;Google\n                                            Reviews\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\n                                    <p class=\"mb-1 text-dark fw-medium\">\n                                        {{ele?.addressDetails?.city}},\n                                        {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\n                                    </p>\n                                    <p class=\"mb-0 fw-bold\">Phone-\n                                        <span\n                                            [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\n                                    </p>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-0  fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\n                                        STORE HOURS -\n                                        {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\n                                    </p>\n                                </div>\n                            </div>\n                            <!-- Fixed bottom buttons -->\n                            <div class=\"d-flex gap-3 align-items-center justify-content-between  p-3 w-100 br-20\"\n                                [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\n                                [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                                <div class=\"br-12 d-flex align-items-center justify-content-center\"\n                                    style=\"width: 30px; height: 30px;\"\n                                    (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\n                                    [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\n                                        style=\"height: 20px;cursor: pointer;\">\n                                        <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\n                                            d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                    </svg>\n                                </div>\n                                <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n                                    simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n                                    [color]=\"data?.styles?.background?.accentColor\"\n                                    [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                                    [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\n                                    {{button?.content?.label}}\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </ng-container>\n            <ng-template #loaderScreen>\n                <div class=\"row loader-container\">\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\n                        <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\n                width: '100%',\n                height: '40vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                    </ng-container>\n                </div>\n            </ng-template>\n        </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i5.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i6.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-store-list', standalone: true, imports: [CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatIcon,
                        SimpoComponentModule,
                        AnimationDirective,
                        BackgroundDirective,
                        HoverDirective,
                        ButtonDirectiveDirective,
                        ContentFitDirective,
                        NgxSkeletonLoaderModule,
                        ButtonEditorDirective,
                        ColorDirective,
                        SpacingHorizontalDirective,
                        CornerDirective,
                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\n            <ng-container *ngIf=\"!loader\">\n                <div class=\"store-header mb-3\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\n                    pincode :\n                    \"Find a Store Near You\"}}\n                </div>\n                <div class=\"sub-text\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\n                    totalCount\n                    + ' stores in this locality, scroll down to view the stores\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\n                    and\n                    we look forward to serving you.' }}\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '3vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n                <div class=\"sub-text w-75\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '2vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\n                [class.error-border]=\"error\">\n                <div class=\"d-flex align-items-center w-90\">\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\n                    </div>\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\n                        [style.backgroundColor]=\"'#ffffff'\"\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\n                </div>\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\n            </div>\n            <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\n                (Ex:500088)</span>\n        </div>\n        <div class=\"bottom-container row  mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\n            [id]=\"data?.id\">\n            <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\n                <ng-container *ngFor=\"let state of stateList; let i = index\">\n                    <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\n                        <ng-container *ngIf=\"state?.stateImage; else noImage\">\n                            <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\n                        </ng-container>\n                        <ng-template #noImage>\n                            <img class=\"w-100 h-75\"\n                                src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\n                        </ng-template>\n                        <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\n                        <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\n            </div>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text w-100 text-center\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '6vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\n                submit &&\n                showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\n                \"Showing All Stores\"}}</div>\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\n                <div class=\"row d-flex\">\n                    <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                        *ngFor=\"let ele of storesList; let i = index\">\n                        <div class=\"card-body position-relative d-flex flex-column  h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                            <!-- Content -->\n                            <div class=\"h-100  p-3 pb-0\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\n                                        <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\n                                        <div class=\"f-11\">\n                                            \u2B504.{{ele?.star}} &nbsp;&#x2022;&nbsp;{{ele?.reviewCount}}&nbsp;Google\n                                            Reviews\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\n                                    <p class=\"mb-1 text-dark fw-medium\">\n                                        {{ele?.addressDetails?.city}},\n                                        {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\n                                    </p>\n                                    <p class=\"mb-0 fw-bold\">Phone-\n                                        <span\n                                            [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\n                                    </p>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-0  fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\n                                        STORE HOURS -\n                                        {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\n                                    </p>\n                                </div>\n                            </div>\n                            <!-- Fixed bottom buttons -->\n                            <div class=\"d-flex gap-3 align-items-center justify-content-between  p-3 w-100 br-20\"\n                                [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\n                                [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                                <div class=\"br-12 d-flex align-items-center justify-content-center\"\n                                    style=\"width: 30px; height: 30px;\"\n                                    (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\n                                    [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\n                                        style=\"height: 20px;cursor: pointer;\">\n                                        <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\n                                            d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                    </svg>\n                                </div>\n                                <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n                                    simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n                                    [color]=\"data?.styles?.background?.accentColor\"\n                                    [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                                    [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\n                                    {{button?.content?.label}}\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </ng-container>\n            <ng-template #loaderScreen>\n                <div class=\"row loader-container\">\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\n                        <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\n                width: '100%',\n                height: '40vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                    </ng-container>\n                </div>\n            </ng-template>\n        </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.RestService }, { type: i2.Router }], propDecorators: { data: [{
                type: Input
            }], edit: [{
                type: Input
            }], customClass: [{
                type: Input
            }], delete: [{
                type: Input
            }], index: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 