<template>
    <div class="formInline detailsOverview">
        <!-- Contact Details -->
        <div class="checkoutSectionWrap">
            <div class="overviewHeader">
                <h5>Contact Details</h5>
            </div>
            <div class="overviewContent">
                <div class="row">
                    <label>Name</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.billing?.firstname) }}
                        {{ capitalize(basket.address?.billing?.lastname) }}
                    </div>
                </div>

                <div class="row">
                    <label>Email</label>
                    <div class="fakeInput">
                        {{ basket.info?.email }}
                    </div>
                </div>

                <div class="row">
                    <label>Phone number</label>
                    <div class="fakeInput">
                        {{ basket.info?.contact_no }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Billing Details -->
        <div class="checkoutSectionWrap">
            <div class="overviewHeader">
                <h5>Billing Details</h5>
            </div>
            <div class="overviewContent">
                <div class="row">
                    <label>Address Line 1</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.billing?.address1) }}
                    </div>
                </div>

                <div class="row" v-if="basket.address?.billing?.address2">
                    <label>Address Line 2</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.billing?.address2) }}
                    </div>
                </div>

                <div class="row">
                    <label>City</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.billing?.city) }}
                    </div>
                </div>

                <div class="row">
                    <label>Postcode</label>
                    <div class="fakeInput">
                        {{ uppercase(basket.address?.billing?.postcode) }}
                    </div>
                </div>

                <div class="row">
                    <label>Country</label>
                    <div class="fakeInput">
                        {{ capitalize(billingCountry) }}
                    </div>
                </div>

                <div class="row" v-if="billingState">
                    <label>State</label>
                    <div class="fakeInput">
                        {{ capitalize(billingState) }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Delivery Details -->
        <div class="checkoutSectionWrap">
            <div class="overviewHeader">
                <h5>Delivery Details</h5>
            </div>
            <div class="overviewContent">
                <div class="row">
                    <label>Name</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.shipping?.firstname) }}
                        {{ capitalize(basket.address?.shipping?.lastname) }}
                    </div>
                </div>

                <div class="row">
                    <label>Address Line 1</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.shipping?.address1) }}
                    </div>
                </div>

                <div class="row" v-if="basket.address?.shipping?.address2">
                    <label>Address Line 2</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.shipping?.address2) }}
                    </div>
                </div>

                <div class="row">
                    <label>City</label>
                    <div class="fakeInput">
                        {{ capitalize(basket.address?.shipping?.city) }}
                    </div>
                </div>

                <div class="row">
                    <label>Postcode</label>
                    <div class="fakeInput">
                        {{ uppercase(basket.address?.shipping?.postcode) }}
                    </div>
                </div>

                <div class="row">
                    <label>Country</label>
                    <div class="fakeInput">
                        {{ capitalize(shippingCountry) }}
                    </div>
                </div>

                <div class="row" v-if="shippingState">
                    <label>State</label>
                    <div class="fakeInput">
                        {{ capitalize(shippingState) }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Notes -->
        <div class="checkoutSectionWrap" v-if="basket.info?.message">
            <div class="row">
                <label>Notes</label>
                <div class="fakeInput">
                    {{ basket.info.message }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'details-overview',

    props: {
        basket: {
            type: Object,
            required: true
        },
        billingCountry: {
            type: String,
            default: ''
        },
        shippingCountry: {
            type: String,
            default: ''
        },
        billingState: {
            type: String,
            default: null
        },
        shippingState: {
            type: String,
            default: null
        }
    },

    methods: {
        capitalize(str) {
            if (!str) return '';
            return str.toString().charAt(0).toUpperCase() + str.toString().slice(1);
        },

        uppercase(str) {
            if (!str) return '';
            return str.toString().toUpperCase();
        }
    }
};
</script>
