<!-- OLD SCHEDULE BEGINS -->

<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
        <div class="container-fluid page-container-grouped-styles page-schedule">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4">
                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
                    <template v-if="ChangeShopLink.length">
                        <textBlock
                            cmsWidgetName="ChangeShopLink"
                            justifyText="center"
                            class="mb-5 text-link-small change-location"
                            marginTopSizeOverride="1" />
                    </template>
                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
                    <datePicker
                        customComponentId="dateQuestion"
                        selectableDatesSetting="custom"
                        ref="datePicker"
                        v-model="selectedDate"
                        class="text-link-small"
                        :customSelectableDatesCallback="getAvailableDatesMethod"
                        validationRules="date-required"
                        @date-clicked="handleDateClicked"
                        :pricingByDayBasePrice="pricingByDayBasePrice"
                        :pricingByDayUpcharge="pricingByDayUpcharge"
                        :showPricingByDay="showPricingByDay"
                        :isPricingByDayExperiment="isPricingByDayExperiment"
                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
                        :appointmentType="appointmentType"
                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
                        :estimatedServiceMinutesMinimum="
                            selectableDatesData.estimatedServiceMinutesMinimum
                        "
                        :estimatedServiceMinutesMaximum="
                            selectableDatesData.estimatedServiceMinutesMaximum
                        "
                        @TimeSlotSelected="updateTimeSlot"
                        :displayWaitList="displayWaitList"
                        @waitListRequested="handleWaitListRequested" />
                    <navbar
                        cmsWidgetName="FunnelFooterWidget"
                        ref="navbar"
                        :isForwardActionDisabled="!meta.valid"
                        @back-clicked="backButtonAction"
                        @ForwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
    </Form>
</template>

<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form, defineRule } from "vee-validate";
import datePicker from "@/digital-components/date-picker/date-picker";
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
import textBlock from "@/digital-components/text-block/text-block";

// Supporting files
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { settleAllPromises } from "@/helpers/layout-helper";
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
import {
    calcDaysBetweenDates,
    convertDateStringToDate,
    sumDateString,
} from "@/layouts/schedule/helpers/schedule-helper";
import {
    AppointmentTypeStrings,
    PREMIUM_FEE_PART_TYPE,
    PRICING_BY_DAY_PART_TYPE,
} from "@/constants/schedule-constants";
import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import store from "@/store";
import experimentMixin from "@/mixins/experiment-mixin.js";
import { experimentSettings } from "@/constants/experiments";
import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
import { partNumberStrings } from "@/constants/part-number-strings";
import { deepClone } from "@/helpers/object-helper";
import { debugLog } from "@/helpers/debug-log-helper";

// DEFINE VALIDATION RULES
defineRule("date-required", required(errorMessages.DATE_REQUIRED));

// Define constants
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)

const getAvailableDates = async (
    startDateString,
    endDateString,
    appointmentType,
    providerNumber
) => {
    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
    const difference = calcDaysBetweenDates(startDateString, endDateString);
    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
    const storeActionConfigs = [];
    const timeSlotsData = {};
    timeSlotsData.days = [];
    let apiStartDate = startDateString;
    let apiEndDate = endDateString;

    for (let i = 1; i <= apiCallsCount; i++) {
        let storeActionConfig;

        if (i > 1) {
            apiStartDate = sumDateString(apiEndDate, 1);
            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);

            if (i === apiCallsCount) {
                apiEndDate = endDateString;
            }
        } else {
            if (apiEndDate > apiEndDateLimit) {
                apiEndDate = apiEndDateLimit;
            }
        }

        if (appointmentType === AppointmentTypeStrings.MOBILE) {
            storeActionConfig = {
                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
                payload: {
                    startDate: apiStartDate,
                    endDate: apiEndDate,
                },
            };
        } else {
            storeActionConfig = {
                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
                payload: {
                    startDate: apiStartDate,
                    endDate: apiEndDate,
                    shopAppointmentType: appointmentType,
                    providerNumber: providerNumber,
                },
            };
        }
        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
    }

    const timeSlotsResponsesData = {
        days: [],
    };

    function compareDayStrings(a, b) {
        if (a.date < b.date) return -1;
        if (a.date > b.date) return 1;
        return 0;
    }

    const makeParallelCalls = async () => {
        await Promise.all(
            storeActionConfigs.map(async (storeAction) => {
                const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
                    storeAction.storeAction,
                    storeAction.payload,
                    "schedule",
                    false
                );
                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
                timeSlotsResponsesData.days = [
                    ...timeSlotsResponsesData.days,
                    ...timeSlotsResponse.data.days,
                ];
            })
        );
    };

    return makeParallelCalls().then(() => {
        // sort days chronologically
        timeSlotsResponsesData.days.sort(compareDayStrings);
        return timeSlotsResponsesData;
    });
};

export default {
    name: "schedule",
    data() {
        return {
            selectedDate: this.getSelectedDate(),
            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
            selectableDatesData: [],
            mobilePremiumAppointmentFee: null,
            waitListRequested: null,
            displayWaitList: null,
            pricingByDayUpchargeLineItem: null,
            includePricingByDayUpcharge: null,
            isPricingByDayExperiment: null,
            pricingByDayBasePrice: null,
            pricingByDayUpcharge: null,
            showPricingByDay: null,
        };
    },
    async beforeRouteEnter(to, from, next) {
        const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
            experimentSettings.PRICING_BY_DAY,
            "true"
        );
        const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;

        // Get pricingByDayBasePrice needed for Pricing By Day
        const lineItems = deepClone(store.getters.order.lineItems);
        const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
        const shouldHideRecalibration =
            experimentMixin.methods.hasSettingEqualTo(
                experimentSettings.RECAL_PRICE_REMOVE,
                "true"
            ) && isRecalibrationOnOrder;
        const glassParts =
            isRecalibrationOnOrder && shouldHideRecalibration
                ? getItemsWithoutRecalParts(lineItems.glassParts)
                : (lineItems.glassParts ?? []);
        const supportingItemsFromStore = lineItems?.supportingItems;
        const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
            lineItems.supportingItems,
            {
                partNumbersToRemove: [
                    partNumberStrings.RECYCLE_FEE,
                    partNumberStrings.PRICING_BY_DAY_UPCHARGE,
                ],
            }
        );
        const lineItemsToBePriced = {
            glassParts: glassParts,
            supportingItems: supportingItemsWithoutFees,
            vaps: lineItems.vaps ?? [],
            promos: lineItems.promos ?? [],
        };
        const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
        const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
        const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
        let includePricingByDayUpcharge = false;

        //  Check to see if date should be pre-selected
        let preSelectedSlot = await store.getters.order.schedule;
        if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
            preSelectedSlot = null;
        } else {
            // Check to see if pre-selected date should have pricing by day upcharge
            if (showPricingByDay) {
                // is this preSelectedDate a higher priced pricingByDay day?
                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
                const dayObject = DAYS_OF_WEEK[dayIndex];
                if (dayObject.isPricingByDayUpchargeDay) {
                    includePricingByDayUpcharge = true;
                }
            }
        }

        // Set up promises
        const cmsContentPromise = fetchCmsContentForPage(to.name);

        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
            store.getters.order.serviceLocation.zipCodeCtu,
            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
        );

        // While Pricing By Day Experiment is active, using the updated datePicker
        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
            // setup config options for date-picker
            selectableDatesSetting: "custom",
            initialViewRowsToShow: 2,
            customSelectableDatesCallback: getAvailableDates,
            preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
        });

        // Get pricingByDayUpcharge needed for Pricing By Day
        const pricingByDayUpchargePartPromise = showPricingByDay
            ? getPricingByDayPartWithPrice()
            : null;

        const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
            storeActions.GET_MOBILE_PREMIUM_FEE,
            null,
            "schedule"
        );
        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
            if (result.data) {
                return baseMixin.methods.dispatchStoreActionWithLogging(
                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
                    {
                        availableLineItems: [result.data],
                    },
                    "schedule",
                    false
                );
            } else {
                return result.data;
            }
        });

        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
            {
                resultKey: "alertReasons",
                promise: alertReasonsPromise,
            },
            {
                resultKey: "datePickerInitialData",
                promise: datePickerInitialDataPromise,
            },
            {
                resultKey: "pricingByDayUpchargePart",
                promise: pricingByDayUpchargePartPromise,
            },
            {
                resultKey: "premiumFeeWithPrice",
                promise: premiumFeeWithPricePromise,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);

        const pricingByDayUpcharge = showPricingByDay
            ? await baseMixin.methods.getTotalLineItemPrice(
                  resultMap.pricingByDayUpchargePart,
                  false
              )
            : null;

        const datePickerInitialData = resultMap.datePickerInitialData;
        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
            vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
                ? resultMap.premiumFeeWithPrice[0]
                : null;
            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
            vm.setDisplayWaitList();
            vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
            vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
            vm.isPricingByDayExperiment = isPricingByDayExperiment;
            vm.pricingByDayBasePrice = pricingByDayBasePrice;
            vm.pricingByDayUpcharge = pricingByDayUpcharge;
            vm.showPricingByDay = showPricingByDay;
        });
    },
    mounted() {
        this.$nextTick(() => {
            const selectableDatesData = this.selectableDatesData;
            // if no date selected on load
            if (!this.selectedDate) {
                if (selectableDatesData?.days?.length > 0) {
                    this.selectedDate = selectableDatesData.days[0].date;
                } else {
                    setTimeout(() => {
                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
                            this.selectableDatesData = moreSelectableDatesData;
                            if (selectableDatesData?.days?.length > 0) {
                                this.selectedDate = selectableDatesData.days[0].date;
                            }

                            this.setDisplayWaitList();
                        });
                    }, 50);
                }
            }
        });
    },
    computed: {
        ChangeShopLinkText() {
            return this.getCmsContent("ChangeShopLink", "Text");
        },
        ChangeShopLink() {
            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
        },
        appointmentType() {
            return this.$store.getters.order.serviceLocation.appointmentType;
        },
        timeSlotsForSelectedDate() {
            if (!this.selectedDate) return null;

            return this.selectableDatesData.days?.find(
                (selectableDate) => selectableDate.date === this.selectedDate
            );
        },
    },
    methods: {
        splitCopyOnCMSPlaceHolder,
        arePagePrerequisitesValid() {
            const serviceLocation = store.getters.order.serviceLocation;

            const serviceLocationPreReqs =
                serviceLocation.zipCode &&
                serviceLocation.zipCodeCtu &&
                serviceLocation.appointmentType &&
                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
                    serviceLocation.provider.providerNumber);

            const paymentInfo = store.getters.payment.isInsurance !== null;

            const damageInfo =
                store.getters.order.damage.isRepair ||
                (store.getters.order.lineItems?.glassParts != null &&
                    store.getters.order.lineItems.glassParts.length > 0);

            const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;

            // prettier-ignore
            {
                debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
                debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
                debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
                debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
                debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
                debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
                debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
                debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
                debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
            }
            return preReqResult;
        },
        async getAvailableDatesMethod(startDate, endDate) {
            const newShopTimeSlots = await getAvailableDates(
                startDate,
                endDate,
                this.appointmentType,
                this.$store.getters.order.serviceLocation.provider.providerNumber
            );

            // ADD API CALL RESULTS TO EXISTING DATE DATA
            this.selectableDatesData.days = this.selectableDatesData.days.concat(
                newShopTimeSlots.days
            );
            return newShopTimeSlots;
        },
        getAvailableDates,
        getServiceZipCtuCodeFromStore() {
            return store.getters.order.serviceLocation.zipCodeCtu;
        },
        getSelectedDate() {
            return store.getters.order.schedule.date;
        },
        getSelectedTimeSlotInfo() {
            const supportingItems = this.getSupportingItems();

            var isPremiumAppointment = false;
            if (supportingItems) {
                isPremiumAppointment =
                    !!supportingItems.filter(
                        (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
                    ).length > 0;
            }

            const selectedTimeSlotInfo = {
                timeSlot: store.getters.order.schedule,
                isPremiumAppointment: isPremiumAppointment,
            };

            return selectedTimeSlotInfo;
        },
        getSupportingItems() {
            return store.getters.lineItems.supportingItems;
        },
        updateFooterButtonText(timeSlotInfo) {
            let navbarButtonText;
            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
                navbarButtonText = "Continue";
            } else {
                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
                    timeSlotInfo.timeSlot.date
                )}`;

                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                        timeSlotInfo.timeSlot.startTime
                    )}`;
                } else if (
                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
                    !timeSlotInfo.isPremiumAppointment
                ) {
                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                        timeSlotInfo.timeSlot.startTime,
                        true
                    )} - ${this.getDisplayTextForMilitaryTime(
                        timeSlotInfo.timeSlot.endTime,
                        true
                    )}`;
                }
            }
            this.$refs.navbar.updateButtonText(navbarButtonText);
        },
        convertSelectedDateToShortMonthAndDay(selectedDate) {
            // This conversion ensures we don't get get GMT induced date changes
            const dateObject = convertDateStringToDate(selectedDate);
            // Ex: April 25
            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
        },
        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
            // Expected input: "HH:MM"
            let hours = parseInt(militaryTimeInput.split(":")[0]);
            const minutes = militaryTimeInput.split(":")[1];
            const meridianNotation = hours > 11 ? "PM" : "AM";

            if (hours > 12) {
                hours -= 12;
            }

            if (shouldTrimMinutesIfEmpty && minutes === "00") {
                return `${hours} ${meridianNotation}`;
            } else {
                return `${hours}:${minutes} ${meridianNotation}`;
            }
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(
                this.navigationScenarios.CLICKED_BACK,
                this.pageName
            );
        },
        forwardButtonAction() {
            this.updateSupportingItems();

            if (this.displayWaitList) {
                var gaLabel = "";
                const status = this.waitListRequested ? "checked" : "unchecked";
                const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
                gaLabel = `${status}_${type}`;

                const currentDate = new Date();
                const dateString = this.selectableDatesData.days[0].date;
                const [year, month, day] = dateString.split("-").map(Number);
                const appointmentDate = new Date(year, month - 1, day);
                const timeDifference = appointmentDate - currentDate;

                // Convert the time difference from milliseconds to days
                const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

                gaLabel +=
                    "_" +
                    daysUntilAppointment.toString() +
                    "_" +
                    store.getters.order.serviceLocation.zipCode +
                    "_" +
                    store.getters.order.serviceLocation.zipCodeCtu;
                this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
            }
            if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
                    this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
                    this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
            }

            this.dispatchStoreAction(
                this.storeActions.SAVE_SCHEDULE,
                this.selectedTimeSlotInfo.timeSlot,
                false
            );

            if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
                this.dispatchStoreAction(
                    this.storeActions.SAVE_WAITLIST_REQUESTED,
                    this.waitListRequested,
                    false
                );
            }

            this.$router.navigateWithSaving(
                this.navigationScenarios.CLICKED_FORWARD,
                this.pageName
            );
        },
        setDisplayWaitList() {
            if (
                experimentMixin.methods.hasSettingEqualTo(
                    experimentSettings.DISPLAY_WAITLIST,
                    "true"
                ) &&
                this.selectableDatesData.days[0]
            ) {
                const dateString = this.selectableDatesData.days[0].date;
                const [year, month, day] = dateString.split("-").map(Number);
                const targetDate = new Date(year, month - 1, day);
                const currentDate = new Date();
                const futureDate = new Date(currentDate);
                const experimentThresholdDays = experimentMixin.methods.hasSetting(
                    experimentSettings.WAITLIST_THRESHOLD_DAYS
                )
                    ? parseInt(
                          experimentMixin.methods.getSettingValue(
                              experimentSettings.WAITLIST_THRESHOLD_DAYS
                          )
                      )
                    : 0;
                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);

                if (targetDate >= futureDate) {
                    this.displayWaitList = true;
                } else {
                    this.displayWaitList = false;
                }
            }
        },
        updateSupportingItems() {
            const supportingItems = this.getSupportingItems();

            // if we have a pricing by day upcharge, then save/update supporting items with it
            const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
                (item) => item.partType == PRICING_BY_DAY_PART_TYPE
            );

            if (this.includePricingByDayUpcharge && this.showPricingByDay) {
                if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
                    supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
                        this.pricingByDayUpchargeLineItem.laborAmount;
                    supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
                        this.pricingByDayUpchargeLineItem.sellingPrice;
                    supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
                        this.pricingByDayUpchargeLineItem.kitPrice;
                } else {
                    supportingItems.push(this.pricingByDayUpchargeLineItem);
                }
            } else {
                if (pricingByDayUpchargeFeeIndex >= 0) {
                    // remove pricing by day upcharge if it already was in store
                    supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
                }
            }

            // if we have a premium fee(early bird), then save/update supporting items
            if (
                this.appointmentType === AppointmentTypeStrings.MOBILE &&
                this.selectedTimeSlotInfo?.isPremiumAppointment
            ) {
                const premiumFeeIndex = supportingItems.findIndex(
                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
                );

                if (premiumFeeIndex > -1) {
                    supportingItems[premiumFeeIndex].laborAmount =
                        this.mobilePremiumAppointmentFee.laborAmount;
                    supportingItems[premiumFeeIndex].sellingPrice =
                        this.mobilePremiumAppointmentFee.sellingPrice;
                    supportingItems[premiumFeeIndex].kitPrice =
                        this.mobilePremiumAppointmentFee.kitPrice;
                } else {
                    supportingItems.push(this.mobilePremiumAppointmentFee);
                }
            } else {
                if (!supportingItems) {
                    return;
                }

                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
                const removePremiumFeeIndex = supportingItems.findIndex(
                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
                );

                if (removePremiumFeeIndex >= 0) {
                    supportingItems.splice(removePremiumFeeIndex, 1);
                }
            }

            this.dispatchStoreAction(
                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
                supportingItems,
                false
            );
        },
        handleWaitListRequested(value) {
            this.waitListRequested = value;
        },
        handleDateClicked(date) {
            // do something to mark this as upcharge day or not...
            if (date.isPricingByDayUpchargeDay) {
                this.includePricingByDayUpcharge = true;
            } else {
                this.includePricingByDayUpcharge = false;
            }
        },
        updateTimeSlot(timeSlot) {
            this.selectedTimeSlotInfo = timeSlot;
        },
    },
    watch: {
        selectedDate(newValue, oldValue) {
            // Clear time slot selection if date selected changes
            if (newValue !== oldValue) {
                this.selectedTimeSlotInfo = {
                    timeSlot: {
                        date: null,
                        routeCode: null,
                        startTime: null,
                        endTime: null,
                        jobMaxMinutes: null,
                        jobMinMinutes: null,
                    },
                    isPremiumAppointment: null,
                };
            }
        },
        selectedTimeSlotInfo(newValue) {
            this.updateFooterButtonText(newValue);
        },
    },
    components: {
        funnelHeader,
        navbar,
        funnelSubHeader,
        Form,
        loadingModal,
        datePicker,
        locationAlerts,
        textBlock,
    },
};
</script>

<style lang="scss">
.container-fluid {
    &.page-schedule {
        padding: 0 1rem;
        .text-link-small {
            a,
            .btn-link {
                width: auto;
                margin: 0 auto;
                height: auto;
                font-size: 0.875rem;
                line-height: 1.75;
                padding: 0;
                border-radius: 0;
                &:focus {
                    outline: 1px solid $blue;
                }
                @include media-breakpoint-up(md) {
                    font-size: 1rem;
                }
            }
        }
        .funnel-sub-header {
            h5.dark-header {
                margin-bottom: 0.25rem;
            }
        }
        .change-location a {
            font-family: AvertaSemibold;
        }
        .time-slots-question {
            padding: 0 0.75rem;
        }
    }
}
</style>

<!-- OLD SCHEDULE ENDS -->
