<template>
    <div class="row">
        <div class="col-auto">
            <button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
        </div>
        <div class="col text-right">
            <button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="data && data.bankAccount && Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useFormHandler } from '@/composables/useFormHandler';
import route from '@/general/functions/router';
import { track } from '@/utils/tracking';

const props = withDefaults(defineProps<{
    order_reference_no?: string[];
    data: any;
    section?: string;
}>(), {
    order_reference_no: () => []
});

const { submit, parameters } = useFormHandler(props);

const successHandler = (response: any) => {
    // fire to gtag manager for fb pixel tracking: InitiateCheckout — booking created
    track('exchange_checkout', {
        value: Number(String(props.data.amount).replace(/,/g, '')),
        currency: 'MYR',
        booking_id: response.payload.data.marking
    });

    window.location.href = route('booking.details', response.payload.data.marking);
};

const submitForm = () => {
    // fire to gtag manager for fb pixel tracking: AddToCart — fired when the user clicks Confirm Order
    track('exchange_add_to_cart', {
        value: Number(String(props.data.amount).replace(/,/g, '')),
        currency: 'MYR'
    });

    parameters.value = {
        company_id: props.data.company.id,
        type: props.data.type,
        fix_amount: props.data.amount,
        service_id: props.data.serviceType.id,
        transferable_bank_id: props.data.bankAccount.id,
        convertible_currency_id: props.data.serviceType.selectedCurrency.id,
    };

    if ([4, 10].includes(props.data.serviceType.id)) {
        parameters.value.order_reference_no = props.order_reference_no;
    }

    submit(route('api.booking.create'), 'post', props.section, true, true, parameters.value, { successHandler });
};
</script>
