<template>
    <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
        <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
        <div class="my-4 alert-heading text-center">
            <span v-html="afterpayHeaderCopy" />
            &nbsp;
            <span class="afterpay-amount">{{ this.afterpayPrice }}</span>
            <br />
            <span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
            &nbsp;
            <img :src="afterPayImageUrl" />
            &nbsp;
            <a
                id="afterpay-learnmore"
                href="#"
                data-afterpay-modal="en_US-safelite"
                data-bind="click:afterpayLearnMore">
                <img :src="infoIcon" alt="Info Icon" class="info-icon" />
            </a>
            <div class="after-pay">
                <div
                    class="after-pay-toggle"
                    :class="[isExpanded ? 'expanded' : '']"
                    @click="toggleIsExpanded">
                    <a href="#!" v-html="paymentPlanToggleHeading" />
                </div>
                <div class="after-pay-details">
                    <div class="payment-section">
                        <div class="payment-card">
                            <div class="calendar-section">
                                <div class="icon"><img :src="calendarIcon" /></div>
                                <div>Today</div>
                            </div>
                            <div class="payment-amount-section">
                                <div class="icon"><img :src="paymentIcon" /></div>
                                <div class="amount-due">{{ this.afterpayPrice }}</div>
                            </div>
                        </div>

                        <div class="payment-card">
                            <div class="calendar-section">
                                <div class="icon"><img :src="calendarIcon" /></div>
                                <div>2 weeks</div>
                            </div>
                            <div class="payment-amount-section">
                                <div class="icon"><img :src="paymentIcon" /></div>
                                <div class="amount-due">{{ this.afterpayPrice }}</div>
                            </div>
                        </div>

                        <div class="payment-card">
                            <div class="calendar-section">
                                <div class="icon"><img :src="calendarIcon" /></div>
                                <div>4 weeks</div>
                            </div>
                            <div class="payment-amount-section">
                                <div class="icon"><img :src="paymentIcon" /></div>
                                <div class="amount-due">{{ this.afterpayPrice }}</div>
                            </div>
                        </div>

                        <div class="payment-card">
                            <div class="calendar-section">
                                <div class="icon"><img :src="calendarIcon" /></div>
                                <div>6 weeks</div>
                            </div>
                            <div class="payment-amount-section">
                                <div class="icon"><img :src="paymentIcon" /></div>
                                <div class="amount-due">{{ this.afterpayPrice }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="legend">
                        <div class="legend-item">
                            <img :src="calendarKeyIcon" />
                            <span>Payment Schedule</span>
                        </div>
                        <div class="legend-item">
                            <img :src="paymentKeyIcon" />
                            <span>Amount Due</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "afterpay-breakout",

    props: {
        cmsWidgetName: String,
        totalAmount: Number,
    },
    data() {
        return { isExpanded: false };
    },
    methods: {
        toggleIsExpanded() {
            this.isExpanded = !this.isExpanded;
        },
    },
    computed: {
        afterPayImageUrl() {
            return this.getCmsContent(this.cmsWidgetName, "Image");
        },
        hasImage() {
            return !!this.imageUrl;
        },
        afterpayHeaderCopy() {
            // Text for Afterpay Breakout experiment

            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        afterpayHeaderSubHeaderCopy() {
            // Text for Afterpay Breakout experiment

            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
        },
        afterpayPrice() {
            const adjusted = (this.totalAmount / 4).toFixed(2);
            return `$${adjusted}`;
        },
        infoIcon() {
            return require(`@/assets/img/icons/info-circle.svg`);
        },
        calendarIcon() {
            return require(`@/assets/img/icons/calendar-icon-black.svg`);
        },
        paymentIcon() {
            return require(`@/assets/img/icons/payment-icon-green.svg`);
        },
        calendarKeyIcon() {
            return require(`@/assets/img/icons/calendar-icon-grey.svg`);
        },
        paymentKeyIcon() {
            return require(`@/assets/img/icons/payment-icon-grey.svg`);
        },
        paymentPlanToggleHeading() {
            return this.getCmsContent(this.cmsWidgetName, "BodyText");
        },
    },
};
</script>
<style lang="scss" scoped>
.alert {
    border-radius: 5px;
    margin-top: 1rem;

    &.alert-info {
        .alert-heading {
            color: #000000;
            font-weight: 600;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            @include media-breakpoint-up(md) {
                margin-left: 1rem;
                margin-right: 1rem;
            }
        }
    }
    .afterpay-amount {
        color: #0c7e47;
    }
    .alert-sub-heading {
        color: #4b4c4e;
        font-weight: 400;
    }
    .after-pay {
        .after-pay-toggle {
            cursor: pointer;

            &:after {
                content: "";
                transition: all 0.5s ease;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right center;
                margin-left: 0.5rem;
                width: 1rem;
                height: 9px;
                display: inline-flex;
            }
            &.expanded:after {
                transform: rotate(180deg);
            }
            &.expanded + .after-pay-details {
                max-height: 500px;
                transition: all 250ms ease-in;
                opacity: 1;
                visibility: visible;
            }
        }
        .after-pay-toggle a {
            font-weight: 600;
            color: #0070d1;
            text-decoration: none;
        }
        .after-pay-details {
            max-height: 0;
            transition: all 250ms ease-out;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
        }
    }
    .payment-section {
        display: flex;
        justify-content: space-around;
        gap: 0.5rem;
        margin-top: 1rem;
        @include media-breakpoint-up(md) {
            gap: 0rem;
        }
    }
    .payment-card {
        display: flex;
        flex-direction: column;
        border-radius: 6px;
        border: 0.25px #b3b4b5;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .calendar-section {
        background-color: #fff; /* White background for calendar area */
        padding: 0.5rem;
        text-align: center;
        gap: 2px;
        font-weight: 700;
        white-space: nowrap;
    }
    .payment-amount-section {
        background-color: #e0f7e9; /* Light green background for payment area */
        padding: 0.5rem;
        text-align: center;
        font-weight: 700;
    }

    .amount-due {
        color: #00723e; /* Green text */
    }
    .legend {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        gap: 1rem;
    }
    .legend-item {
        display: flex;
        align-items: center;
        gap: 2px;
        white-space: nowrap;
    }
    .legend-item span {
        font-weight: 400;
    }
}
</style>
