<script setup>
    import moment from "moment"
    import pixImg from '@global/assets/images/pix-logo.png'
    import gifLoadingPay from '@global/assets/gifs/loadingpayments.gif'
    import { useAlert } from '@/composables/useAlert'

    const { setAlert } = useAlert()
    const route = useRoute();
    const router = useRouter();
    const loading = ref(true);

    const { width: windowWidth } = useWindowSize();
    const isMobile = ref(false)

    const idEvent = ref(null);
    const ingressos = ref([]);
    const dataTickets = ref(null);
    const event = ref(null);
    const items = [
        {
            step: 1,
            title: 'Seus dados',
            icon: 'tabler-user',
        },
        {
            step: 2,
            title: 'Dados dos Ingressos',
            icon: 'tabler-ticket',
        },
        {
            step: 3,
            title: 'Pagamento',
            icon: 'tabler-credit-card',
        },
        {
            step: 4,
            title: 'Confirmação',
            icon: 'tabler-hourglass',
        },
    ]
    const step = ref(1)

    const userData = useCookie('userData').value

    if(!userData || !userData.id) {
        setAlert('Faça login para continuar!', 'error', 'tabler-alert-triangle', 4000)
        router.push('/')
    }
    const userGetData = ref([])
    const ipUser = ref('')

    const isFree = ref(false)

    //Obter IP do usuário
    const getIp = async () => {
        try {
            const res = await fetch('https://api.ipify.org?format=json')
            const data = await res.json()

            ipUser.value = data.ip

        } catch (error) {
            console.error('Erro ao buscar IP: ', error)
        }
    }

    const getUser = async () => {
        try {
            const response = await $api(`/users/get/${userData.id}`, {
                method: 'GET',
            })

            if (!response) return

            userGetData.value = response
            console.log('Usuário Dados:', response)

            purchaseData.value = {
                name: userGetData?.value?.fullName ? userGetData?.value?.fullName : '',
                cpf: userGetData?.value?.cpf ? userGetData?.value?.cpf : '',
                email: userGetData?.value?.email ? userGetData?.value?.email : '',
                phone: userGetData?.value?.phone ? userGetData?.value?.phone : '',
                cep: userGetData?.value?.endereco?.cep ? userGetData?.value?.endereco?.cep : '',
                street: userGetData?.value?.endereco?.street ? userGetData?.value?.endereco?.street : '',
                number: userGetData?.value?.endereco?.number ? userGetData?.value?.endereco?.number : '',
                complement: userGetData?.value?.endereco?.complement ? userGetData?.value?.endereco?.complement : '',
                neighborhood: userGetData?.value?.endereco?.neighborhood ? userGetData?.value?.endereco?.neighborhood : '',
                city: userGetData?.value?.endereco?.city ? userGetData?.value?.endereco?.city : '',
                state: userGetData?.value?.endereco?.state ? userGetData?.value?.endereco?.state : '',
            }

            await getCep()
            await cidadesList(response.endereco.state)

            loading.value = false
        } catch (error) {
            console.log('Erro ao buscar usuário:', error, error.response)
        }

        loading.value = false
    }

    const purchaseData = ref({})
    const parcelas = ref([])

    const getPrices = async () => {
        try {
            const res = await $api(`/purchase/getPrices/eventos`, {
                method: 'GET',
                query: {
                    idUser: userData.id,
                    parcelaSelected: paymentData.value.parcelas,
                    idEvent: idEvent.value,
                    dataTickets: dataTickets.value,
                    ingressos: ingressos.value,
                    paymentMethod: paymentMethod.value
                }
            })

            if (!res) return

            console.log('Preços resss', res)

            /* event.value.paymentInformation.value = res.valorTotal
            event.value.paymentInformation.valorSemTaxa = res.valorTotalSemTaxa
            event.value.paymentInformation.taxa = res.taxa */

            if (!res.valorTotal) {
                res.valorTotal = 0
            }

            dataTickets.value.total = res.valorTotal
            dataTickets.value.totalSemTaxa = res.valorTotalSemTaxa
            dataTickets.value.taxa = res.taxa
            parcelas.value = res.parcelas

            if (res.valorTotal == 0) {
                isFree.value = true
            }
        } catch (error) {
            console.error('Erro ao obter preços', error, error.response)
            if (error?.response?._data?.message) {
                setAlert(error.response._data.message, 'error', 'tabler-alert-triangle', 4000)
            }
        }

    }

    if (!route.params.data) {
        setAlert('Evento não encontrado!', 'error', 'tabler-alert-triangle', 4000)
        router.push('/eventos')
    }

    let data = JSON.parse(atob(route.params.data))

    console.log('Dataa:', data)

    if (!data.evento || !data.ingressos || !data.purchase) {
        setAlert('Evento não encontrado!', 'error', 'tabler-alert-triangle', 4000)
        router.push('/eventos')
    }

    idEvent.value = data.evento
    ingressos.value = typeof data.ingressos == 'string' ? JSON.parse(data.ingressos) : data.ingressos
    dataTickets.value = data.purchase

    const getEvent = async () => {
        try {
            const response = await $api(`/events/evento/${idEvent.value}`, {
                method: 'GET',
            })

            if (!response) return

            event.value = response

            console.log('Evento Dadoss:', response)

            //evento.value.ingressos = evento.value.ingressos.filter(ingresso => !ingresso.agendar || ingresso.agendar && moment(ingresso.dataAgendar + ' ' + ingresso.horaAgendar) > moment())

            for (let ing of event.value?.ingressos) {
                if (ing.agendar && moment(ing.dataAgendar + ' ' + ing.horaAgendar) > moment() && ingressos.value.find(i => i.id == ing.id)) {
                    ingressos.value = ingressos.value.filter(i => i.id != ing.id)
                    setAlert('O ingresso ' + ing.name + ' ainda não está disponível para compra!', 'error', 'tabler-alert-triangle', 4000)
                } else if (ing.limitarHora && moment(ing.podeAteDate + ' ' + ing.podeAteHora) < moment() && ingressos.value.find(i => i.id == ing.id)) {
                    ingressos.value = ingressos.value.filter(i => i.id != ing.id)
                    setAlert('O ingresso ' + ing.name + ' não está mais disponível para compra!', 'error', 'tabler-alert-triangle', 4000)
                } else if (ing.quantity && ing.vendidos >= ing.quantity) {
                    ingressos.value = ingressos.value.filter(i => i.id != ing.id)
                    setAlert('O ingresso ' + ing.name + ' não está mais disponível para compra!', 'error', 'tabler-alert-triangle', 4000)
                }
            }

            if (ingressos.value.length == 0) {
                setAlert('Os ingressos não estão mais disponíveis para compra!', 'error', 'tabler-alert-triangle', 4000)
                router.push('/eventos')
            }

            getPrices()
        } catch (error) {
            console.error('Erro ao buscar evento:', error, error.response)
            setAlert('Evento não encontrado!', 'error', 'tabler-alert-triangle', 4000)
            router.push('/eventos')
        }
    }

    const viewConfirmation = ref(false)

    const getPedingPayment = async () => {
        try {
            const res = await $api(`/purchase/verifyPeddingBuy/${userData.id}`, {
                method: 'POST',
                body: {
                    idEvent: idEvent.value,
                    dataTickets: dataTickets.value
                }
            })

            if (!res) return

            console.log('Pagamentos Pendentes:', res)

            if (res.status == 204) {
                return;
            } else if (res.status == 205) {
                setAlert('Seu pagamento anterior expirou! Efetue a compra novamente.', 'error', 'tabler-alert-triangle', 4000)
                return;
            } else if (res.status == 206) {
                setAlert('Você já realizou a compra deste evento com essa mesma quantidade de ingressos!', 'info', 'tabler-alert-triangle', 4000)
                viewConfirmation.value = true
                return;
            }


            setAlert('Você já realizou a compra deste evento, mas o seu pagamento ainda está pendente! Conclua o pagamento.', 'error', 'tabler-alert-triangle', 8000)

            step.value = 4
            buiyng.value = false
            viewQRCode.value = true
            payMessage.value = 'Pagamento pendente!'

            imageDecodeQRCode.value = res.qrCode.encodedImage
            codePix.value = res.qrCode.payload
            payIdPix.value = res.payment.id
            datePix.value = res.payment.date

            let expH = new Date(res.payment.date)
            expH.setHours(expH.getHours() + 1)
            expireHour.value = expH

            updateCounter(); // Chama imediatamente para evitar delay antes do primeiro interval
            interval = setInterval(updateCounter, 1000);

            verifyPayPix()
            intervalVerifyPay = setInterval(verifyPayPix, 30000); // Verifica a cada 30 segundos 30000

        } catch (error) {
            console.log('Erro ao buscar pagamentos pendentes:', error, error.response)
        }
    }

    const goMeusIngressos = () => {
        router.push({ name: 'my-tickets' })
    }

    onMounted(async () => {
        await getEvent()
        await getUser()
        await getIp()
        await getPedingPayment()

        isMobile.value = windowWidth.value < 768

        purchaseData.value = {
            name: userGetData?.value?.fullName ? userGetData?.value?.fullName : '',
            cpf: userGetData?.value?.cpf ? userGetData?.value?.cpf : '',
            email: userGetData?.value?.email ? userGetData?.value?.email : '',
            phone: userGetData?.value?.phone ? userGetData?.value?.phone : '',
            cep: userGetData?.value?.endereco?.cep ? userGetData?.value?.endereco?.cep : '',
            street: userGetData?.value?.endereco?.street ? userGetData?.value?.endereco?.street : '',
            number: userGetData?.value?.endereco?.number ? userGetData?.value?.endereco?.number : '',
            complement: userGetData?.value?.endereco?.complement ? userGetData?.value?.endereco?.complement : '',
            neighborhood: userGetData?.value?.endereco?.neighborhood ? userGetData?.value?.endereco?.neighborhood : '',
            city: userGetData?.value?.endereco?.city ? userGetData?.value?.endereco?.city : '',
            state: userGetData?.value?.endereco?.state ? userGetData?.value?.endereco?.state : '',
        }

        loading.value = false
    })

    watch(windowWidth, () => {
        isMobile.value = windowWidth.value < 768
    })


    const estados = [
        { value: 'AC', text: 'Acre' },
        { value: 'AL', text: 'Alagoas' },
        { value: 'AP', text: 'Amapá' },
        { value: 'AM', text: 'Amazonas' },
        { value: 'BA', text: 'Bahia' },
        { value: 'CE', text: 'Ceará' },
        { value: 'DF', text: 'Distrito Federal' },
        { value: 'ES', text: 'Espírito Santo' },
        { value: 'GO', text: 'Goiás' },
        { value: 'MA', text: 'Maranhão' },
        { value: 'MT', text: 'Mato Grosso' },
        { value: 'MS', text: 'Mato Grosso do Sul' },
        { value: 'MG', text: 'Minas Gerais' },
        { value: 'PA', text: 'Pará' },
        { value: 'PB', text: 'Paraíba' },
        { value: 'PR', text: 'Paraná' },
        { value: 'PE', text: 'Pernambuco' },
        { value: 'PI', text: 'Piauí' },
        { value: 'RJ', text: 'Rio de Janeiro' },
        { value: 'RN', text: 'Rio Grande do Norte' },
        { value: 'RS', text: 'Rio Grande do Sul' },
        { value: 'RO', text: 'Rondônia' },
        { value: 'RR', text: 'Roraima' },
        { value: 'SC', text: 'Santa Catarina' },
        { value: 'SP', text: 'São Paulo' },
        { value: 'SE', text: 'Sergipe' },
        { value: 'TO', text: 'Tocantins' },
    ]

    const cidades = ref([])

    const cidadesList = async (estado) => {
        if (!estado) {
            estado = 'RJ'
        }

        try {
            const res = await $api(`/users/cidades/${estado}`, { method: "GET" });

            if (!res) return;

            //console.log(res)
            cidades.value = res

        } catch (error) {
            console.error('Erro ao buscar cidades: ', error);
            console.error('Erro ao buscar cidades: ', error.response);
        }
    }

    const getCep = async () => {
        if (purchaseData?.value?.cep?.length === 9) {
            try {
                const res = await $api(`/users/cep/${purchaseData.value.cep}`, { method: "GET" });

                if (!res) return;

                console.log(res)

                purchaseData.value.street = res.logradouro
                purchaseData.value.neighborhood = res.bairro
                purchaseData.value.state = res.uf
                cidadesList(res.uf)
                purchaseData.value.city = res.localidade

            } catch (error) {
                console.error('Erro ao buscar CEP: ', error);
                console.error('Erro ao buscar CEP: ', error.response);
                setAlert('CEP não encontrado! Tente novamente.', 'error', 'tabler-alert-triangle', 4000)
            }
        }
    }

    const cadastroOk = ref(false)

    const onSubmitStep1 = async () => {
        loading.value = true
        console.log('Dados de Compra:', purchaseData.value)

        const costumerIdAsaas = userGetData.value?.costumerIdAsaas

        if (!costumerIdAsaas && !cadastroOk.value) {
            try {
                const resCadastro = await $api('/purchase/createCostumer', {
                    method: 'POST',
                    body: {
                        idUser: userData.id,
                        data: purchaseData.value
                    }
                })

                if (!resCadastro) return

                console.log('Resposta Cadastro:', resCadastro)

                purchaseData.value.name = resCadastro.name
                purchaseData.value.cpf = resCadastro.cpf
                purchaseData.value.email = resCadastro.email
                purchaseData.value.phone = resCadastro.phone
                purchaseData.value.cep = resCadastro.postalCode
                purchaseData.value.street = resCadastro.street
                purchaseData.value.number = resCadastro.addressNumber
                purchaseData.value.complement = resCadastro.complement
                purchaseData.value.neighborhood = resCadastro.province

                cadastroOk.value = true
                nextStep()

            } catch (error) {
                console.log('Erro ao cadastrar costumer:', error, error.response)

                setAlert(error?.response?._data?.message ||
                    'Ocorreu um erro ao cadastrar seus dados! Tente novamente.', 'error', 'tabler-alert-triangle', 6000)
            }
        } else {
            nextStep()
        }

        loading.value = false
    }

    const completNameValidator = (value) => {
        if (!value) return 'Campo obrigatório'

        if (value.split(' ').length < 2) return 'Informe seu nome completo'

        return true
    }

    const validatorIngressos = () => {
        for (let ingresso of ingressos.value) {
            if (!ingresso.buyData.titular_nome || !ingresso.buyData.titular_cpf) {
                setAlert('Preencha os dados do titular do ingresso "' + ingresso.name + '"!', 'error', 'tabler-alert-triangle', 5000)

                return false
            }

            if (ingresso.quantity && ingresso.vendidos >= ingresso.quantity) {
                setAlert('O ingresso ' + ingresso.name + ' não está mais disponível para compra!', 'error', 'tabler-alert-triangle', 4000)
                return false
            }

            if (ingresso.hasAdvancedOptions && ingresso.campos?.length > 0) {
                for (let campo of ingresso.campos) {
                    if (campo.required && !campo.value) {
                        setAlert(`Preencha o campo "${campo.name}" do ingresso "${ingresso.name}!"`, 'error', 'tabler-alert-triangle', 5000)
                        return false
                    }
                }
            }
        }


        return true
    }

    const prevStep = () => {
        if (step.value == 1) return

        if (step.value == 3) {
            payMessage.value = 'Confirmando pagamento...'
        }

        step.value--;
    }

    const nextStep = () => {
        console.log('Step:', step.value)

        if (step.value == 2 && !validatorIngressos()) return


        if (isFree.value && step.value == 2) {
            step.value = 4
            buyFree()
            return
        }

        if (step.value == 5) return
        step.value++
    }

    const paymentMethod = ref(null)
    const paymentMethods = [
        { value: '1', text: 'Cartão de Crédito', icon: true },
        { value: '2', text: 'Pix', image: true }
    ]

    const choisePaymentMethod = (value) => {
        paymentMethod.value = value
        getPrices()
    }

    const formatValue = (value) => {
        if (!value) return 'Grátis'
        let price = value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2, maximumFractionDigits: 2 })
        return price
    }

    const handleDadosForMe = (index) => {
        let ingresso = ingressos.value[index]

        if (ingresso.buyData.forMe) {
            ingresso.buyData.titular_nome = purchaseData.value.name
            ingresso.buyData.titular_cpf = purchaseData.value.cpf
        }
    }

    const paymentData = ref({})

    const buyHandle = () => {
        if (!paymentMethod.value) {
            setAlert('Selecione uma forma de pagamento!', 'error', 'tabler-alert-triangle', 4000)
            return
        }

        if (paymentMethod.value == 1) {
            buyCard()
        } else if (paymentMethod.value == 2) {
            buyPix()
        }
    }

    const buyStatus = ref(false)
    const buiyng = ref(false)
    const recipetUrl = ref('')
    const payMessage = ref('Confirmando pagamento...')

    const buyCard = async () => {
        buiyng.value = true

        console.log('IP:', ipUser.value)
        console.log('Dados de Compra:', purchaseData.value)
        console.log('Dados de Pagamento:', paymentData.value)

        nextStep()

        console.log('body compra', {
            idUser: userData.id,
            idEvent: idEvent.value,
            data: paymentData.value,
            ingressos: ingressos.value,
            dataTickets: dataTickets.value,
            ip: ipUser.value
        })

        try {
            const res = await $api('/purchase/buyCard/eventos', {
                method: 'POST',
                body: {
                    idUser: userData.id,
                    idEvent: idEvent.value,
                    data: paymentData.value,
                    ingressos: ingressos.value,
                    dataTickets: dataTickets.value,
                    ip: ipUser.value
                }
            })

            if (!res) return

            console.log('Resposta Compra:', res)

            buyStatus.value = true
            buiyng.value = false

            payMessage.value = 'Compra realizada com sucesso!'

            recipetUrl.value = res.transactionReceiptUrl

        } catch (error) {
            console.error('Erro ao realizar a compra:', error, error.response)
            if (error.response?._data?.errors?.length > 0 && error.response?._data?.errors[0]?.description) {
                setAlert(`${error.response?._data?.errors[0]?.description}`, 'error', 'tabler-alert-triangle', 6000)
                payMessage.value = error.response?._data?.errors[0]?.description
            } else {
                setAlert(error.response?._data?.message || 'Ocorreu um erro ao realizar a compra! Tente novamente.', 'error', 'tabler-alert-triangle', 6000)
                payMessage.value = error.response?._data?.message || 'Ocorreu um erro ao realizar a compra! Tente novamente.'
            }

            buiyng.value = false
            buyStatus.value = false
        }
    }

    const imageDecodeQRCode = ref('')
    const codePix = ref('')
    const payIdPix = ref(null)
    const datePix = ref(null)
    const viewQRCode = ref(false)

    const now = new Date();
    const expireHour = ref(now.getHours() + 1);
    const countExpires = ref('60:00')
    const viewExp = ref(false)

    // Função para atualizar o contador
    function updateCounter() {
        const now = new Date();
        const timeLeft = expireHour.value - now;

        if (timeLeft >= 0) {
            const minutes = Math.floor((timeLeft / (1000 * 60)) % 60);
            const seconds = Math.floor((timeLeft / 1000) % 60);

            // Formata o tempo restante
            countExpires.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        } else {
            clearInterval(interval);
            countExpires.value = '00:00';
        }

        if (!viewExp.value) viewExp.value = true
    }

    let interval;
    let intervalVerifyPay;

    const buyPix = async () => {
        buiyng.value = true

        nextStep()

        console.log('body compra', {
            idUser: userData.id,
            idEvent: idEvent.value,
            ingressos: ingressos.value,
            dataTickets: dataTickets.value,
        })

        try {
            const res = await $api('/purchase/buyPix/eventos', {
                method: 'POST',
                body: {
                    idUser: userData.id,
                    idEvent: idEvent.value,
                    ingressos: ingressos.value,
                    dataTickets: dataTickets.value
                }
            })

            if (!res) return

            console.log('Resposta Compra:', res)

            buiyng.value = false
            viewQRCode.value = true
            payMessage.value = 'PIX gerado com sucesso!'

            imageDecodeQRCode.value = res.qrCode.encodedImage
            codePix.value = res.qrCode.payload
            payIdPix.value = res.payment.id
            datePix.value = res.payment.date

            let expH = new Date(res.payment.date)
            expH.setHours(expH.getHours() + 1)
            expireHour.value = expH

            updateCounter(); // Chama imediatamente para evitar delay antes do primeiro interval
            interval = setInterval(updateCounter, 1000);

            verifyPayPix()
            intervalVerifyPay = setInterval(verifyPayPix, 30000); // Verifica a cada 5 minutos 30000

        } catch (error) {
            console.error('Erro ao realizar a compra:', error, error.response)
            if (error.response?._data?.errors?.length > 0 && error.response?._data?.errors[0]?.description) {
                setAlert(`${error.response?._data?.errors[0]?.description}`, 'error', 'tabler-alert-triangle', 6000)
                payMessage.value = error.response?._data?.errors[0]?.description
            } else {
                setAlert(error.response?._data?.message || 'Ocorreu um erro ao realizar a compra! Tente novamente.', 'error', 'tabler-alert-triangle', 6000)
                payMessage.value = error.response?._data?.message || 'Ocorreu um erro ao realizar a compra! Tente novamente.'
            }

            buiyng.value = false
            buyStatus.value = false

        }
    }

    const verifyPayPix = async () => {
        console.log('Verificando pagamento PIX...', `/purchase/verifyPayPix/${userData.id}/${payIdPix.value}`)

        if (payIdPix.value == undefined || payIdPix.value == null || datePix.value == undefined || datePix.value == null) {
            return
        }

        try {
            const res = await $api(`/purchase/verifyPayPix/${userData.id}/${payIdPix.value}`, {
                method: 'GET',
                query: {
                    date: encodeURIComponent(datePix.value)
                }
            })

            if (!res) return

            console.log('Resposta Verificação PIX:', res)

            if (res.status == 200) {
                setAlert('Pagamento confirmado com sucesso!', 'success', 'tabler-check', 4000)

                buyStatus.value = true
                payMessage.value = 'Compra realizada com sucesso!'
                viewQRCode.value = false

                if (res.recibo) {
                    recipetUrl.value = res.recibo
                }

                clearInterval(interval);
                clearInterval(intervalVerifyPay);
            } else if (res.status == 205) {

                setAlert('Pagamento não confirmado! O tempo para pagamento expirou.', 'error', 'tabler-alert-triangle', 4000)
                payMessage.value = 'O tempo para o pagamento do PIX expirou!'
                buyStatus.value = false
                viewQRCode.value = false

                clearInterval(interval);
                clearInterval(intervalVerifyPay);
            }

        } catch (error) {
            console.log('Erro ao verificar pagamento PIX:', error, error.response)
        }
    }

    const copyPixCode = () => {
        navigator.clipboard.writeText(codePix.value)
        setAlert('Código copiado!', 'success', 'tabler-check', 4000)
    }

    const buyFree = async () => {
        buiyng.value = true
        payMessage.value = 'Confirmando presença...'

        try {
            const res = await $api('/purchase/buyFree/eventos', {
                method: 'POST',
                body: {
                    idUser: userData.id,
                    idEvent: idEvent.value,
                    ingressos: ingressos.value,
                    dataTickets: dataTickets.value
                }
            })

            if (!res) return

            console.log('Resposta Compra:', res)

            buyStatus.value = true
            buiyng.value = false

            payMessage.value = 'Presença confirmada com sucesso!'

        } catch (error) {
            console.error('Erro ao realizar a compra:', error, error.response)
            if (error.response?._data?.errors?.length > 0 && error.response?._data?.errors[0]?.description) {
                setAlert(`${error.response?._data?.errors[0]?.description}`, 'error', 'tabler-alert-triangle', 6000)
                payMessage.value = error.response?._data?.errors[0]?.description
            } else {
                setAlert(error.response?._data?.message || 'Ocorreu um erro ao realizar a compra! Tente novamente.', 'error', 'tabler-alert-triangle', 6000)
                payMessage.value = error.response?._data?.message || 'Ocorreu um erro ao realizar a compra! Tente novamente.'
            }

            buiyng.value = false
            buyStatus.value = false
        }
    }

    const abrirRecibo = () => {
        window.open(recipetUrl.value, '_blank')
    }

    onUnmounted(() => {
        clearInterval(interval);
        clearInterval(intervalVerifyPay);
    });

</script>

<template>

    <VDialog v-model="viewConfirmation" max-width="500" persistent>
        <VCard>
            <VCardText>
                <h2 class="text-center text-h4 mb-3">Confirmação de Compra</h2>

                <p class="text-center">
                    Você já realizou uma compra deste evento na última hora com a mesma quantidade de ingressos
                    selecionados. Caso deseje ver seus ingressos, clique no botão "Meus Ingressos".
                    Deseja continuar com a compra?
                </p>

                <div class="d-flex flex-column gap-4 justify-center">
                    <VBtn color="primary" @click="router.push('/meus-ingressos')">
                        <VIcon icon="tabler-ticket" class="mr-2" />
                        Meus Ingressos
                    </VBtn>

                    <VBtn color="success" @click="viewConfirmation = false">
                        Continuar Compra
                    </VBtn>

                    <VBtn color="error" @click="router.push('/eventos')" variant="outlined">
                        <VIcon icon="tabler-chevron-left" class="mr-2" />
                        Voltar para Eventos
                    </VBtn>
                </div>
            </VCardText>
        </VCard>
    </VDialog>
    <VRow class="justify-center">
        <VCol cols="12" class="order-md-first order-last" :md="step !== 4 ? 8 : 12">
            <VStepper v-model="step" :mobile="isMobile" :touch="false" :showArrows="false" :mandatory="true"
                color="primary" hide-actions>

                <template v-slot:default>
                    <v-stepper-header>
                        <template v-for="item in items" :key="item.step">
                            <v-stepper-item :step="item.step" :value="item.step" :complete="step > item.step"
                                :icon="item.icon" v-if="item.step != 3 || item.step == 3 && !isFree"
                                :color="step > item.step ? 'success' : step == item.step ? 'primary' : '#4242424d'">
                                <p v-if="!isMobile" class="mb-0" :style="step == item.step ? 'font-weight: 600' : ''">{{
                                    item.title }}</p>
                            </v-stepper-item>

                            <v-divider v-if="item.step !== items[items.length - 1].step"></v-divider>
                        </template>

                    </v-stepper-header>


                    <v-stepper-window v-if="step == 1">

                        <VForm class="mt-6" @submit.prevent="onSubmitStep1">
                            <h4 class="mb-4">
                                <VIcon icon="tabler-user" /> Preencha seus dados
                            </h4>
                            <VRow>

                                <VCol cols="12">
                                    <VLabel>
                                        <VIcon icon="tabler-align-justified" class="mr-2" /> Nome Completo
                                    </VLabel>
                                    <VTextField v-model="purchaseData.name" outlined required
                                        placeholder="Informe seu nome completo" :loading="loading"
                                        :rules="[requiredValidator, completNameValidator]" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-id-badge-2" class="mr-2" /> CPF/CNPJ
                                    </VLabel>
                                    <VTextField v-model="purchaseData.cpf" outlined required
                                        placeholder="Informe seu CPF" v-mask="['###.###.###-##', '##.###.###/####-##']"
                                        :rules="[requiredValidator]" :loading="loading" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-mail" class="mr-2" /> E-mail
                                    </VLabel>
                                    <VTextField v-model="purchaseData.email" outlined required
                                        placeholder="Informe seu e-mail" :rules="[requiredValidator]"
                                        :loading="loading" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-phone" class="mr-2" /> Telefone
                                    </VLabel>
                                    <VTextField v-model="purchaseData.phone" outlined required
                                        placeholder="Informe seu telefone" v-mask="'(##) #####-####'"
                                        :rules="[requiredValidator]" :loading="loading" />
                                </VCol>

                            </VRow>

                            <h4 class="mt-10 mb-4">
                                <VIcon icon="tabler-map-pin" /> Preencha o seu endereço
                            </h4>

                            <VRow>
                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-home" class="mr-2" /> CEP
                                    </VLabel>
                                    <VTextField v-model="purchaseData.cep" outlined required
                                        placeholder="Informe seu CEP" v-mask="'#####-###'" :rules="[requiredValidator]"
                                        :loading="loading" @keyup="getCep" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-map-pins" class="mr-2" /> Endereço
                                    </VLabel>
                                    <VTextField v-model="purchaseData.street" outlined required
                                        placeholder="Informe seu endereço" :rules="[requiredValidator]"
                                        :loading="loading" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-number" class="mr-2" /> Número
                                    </VLabel>
                                    <VTextField v-model="purchaseData.number" outlined required
                                        placeholder="Informe o número" :rules="[requiredValidator]"
                                        :loading="loading" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-align-box-left-bottom" class="mr-2" /> Complemento
                                    </VLabel>
                                    <VTextField v-model="purchaseData.complement" outlined
                                        placeholder="Informe o complemento" :loading="loading" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-map-2" class="mr-2" /> Bairro
                                    </VLabel>
                                    <VTextField v-model="purchaseData.neighborhood" outlined required
                                        placeholder="Informe o bairro" :rules="[requiredValidator]"
                                        :loading="loading" />
                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-building" class="mr-2" /> Cidade
                                    </VLabel>
                                    <VSelect v-model="purchaseData.city" variant="outlined" :items="cidades"
                                        item-title="text" item-value="value"
                                        :placeholder="cidades.length === 0 ? 'Selecione um estado antes' : 'Selecione a cidade'"
                                        :disabled="cidades.length === 0 && purchaseData.city === '' ? true : false"
                                        required :rules="[requiredValidator]" :loading="loading" />

                                </VCol>

                                <VCol cols="12" md="6">
                                    <VLabel>
                                        <VIcon icon="tabler-flag-2" class="mr-2" /> Estado
                                    </VLabel>
                                    <VSelect v-model="purchaseData.state" variant="outlined" :items="estados"
                                        item-title="text" item-value="value" placeholder="Selecione o estado"
                                        @update:modelValue="cidadesList(purchaseData.state)" required
                                        :rules="[requiredValidator]" :loading="loading" />
                                </VCol>
                            </VRow>
                        </VForm>
                    </v-stepper-window>

                    <v-stepper-window v-if="step == 2">
                        <v-expansion-panels>
                            <template v-for="(ingresso, index) in ingressos" :key="ingresso.id">
                                <v-expansion-panel class="my-3">
                                    <v-expansion-panel-title color="#e9e8eb">
                                        {{ index + 1 }} - {{ ingresso.name && ingresso.name !== '' ?
                                            ingresso.name : 'Ingresso'
                                        }}
                                    </v-expansion-panel-title>

                                    <v-expansion-panel-text class="pt-4">
                                        <VRow>
                                            <VCol cols="12" class="py-0">
                                                <VCheckbox v-model="ingresso.buyData.forMe"
                                                    label="Preencher com meus dados"
                                                    @update:model-value="handleDadosForMe(index)"
                                                    v-if="ingressos.filter(i => i.buyData.forMe).length == 0 || ingresso.buyData.forMe" />
                                            </VCol>

                                            <VCol cols="12" md="6">
                                                <AppTextField v-model="ingresso.buyData.titular_nome"
                                                    label="Nome do titular"
                                                    placeholder="Insira o nome do titular deste ingresso"
                                                    :rules="[requiredValidator]" />
                                            </VCol>

                                            <VCol cols="12" md="6">
                                                <AppTextField v-model="ingresso.buyData.titular_cpf"
                                                    label="CPF/CNPJ do titular"
                                                    placeholder="Insira o CPF/CNPJ do titular deste ingresso"
                                                    v-mask="['###.###.###-##', '##.###.###/####-##']"
                                                    :rules="[requiredValidator]" />
                                            </VCol>

                                            <template v-if="ingresso.hasAdvancedOptions && ingresso.campos?.length > 0">
                                                <VCol cols="12" md="6" v-for="(campo, index) in ingresso.campos"
                                                    :key="index">
                                                    <AppSelect v-if="campo.type == 'select'" v-model="campo.value"
                                                        :label="campo.name" :items="campo.options.split(', ')"
                                                        placeholder="Escolha uma opção"
                                                        :persistent-hint="campo.description ? true : false"
                                                        :hint="campo.description"
                                                        :rules="campo.required ? [requiredValidator] : []" />

                                                    <AppTextField v-else v-model="campo.value" :label="campo.name"
                                                        :type="campo.type ?? 'text'"
                                                        :placeholder="`Digite o ${campo.name}`"
                                                        :persistent-hint="campo.description ? true : false"
                                                        :hint="campo.description"
                                                        :rules="campo.required ? [requiredValidator] : []" />

                                                </VCol>
                                            </template>
                                        </VRow>
                                    </v-expansion-panel-text>
                                </v-expansion-panel>
                            </template>
                        </v-expansion-panels>
                    </v-stepper-window>

                    <v-stepper-window v-if="step == 3 && !isFree">
                        <div class="d-flex flex-column align-center mb-2">

                            <h4 class="mb-4 w-100 text-center">
                                <VIcon icon="tabler-cash" /> Escolha a forma de pagamento
                            </h4>

                            <VList v-model="paymentMethod" :rules="[requiredValidator]"
                                :class="isMobile ? 'w-100' : 'w-75'" style="box-shadow: 0px 0px 8px 1px #00000029;">
                                <VListItem v-for="item in paymentMethods" :key="item.value" :value="item.value"
                                    @click="choisePaymentMethod(item.value)" :active="paymentMethod == item.value"
                                    style="border-radius: 6px;">

                                    <div class="d-flex flex-row gap-3">
                                        <VIcon class="mr-3"
                                            :icon="paymentMethod == item.value ? 'tabler-square-check' : 'tabler-square'"
                                            :color="paymentMethod == item.value ? '' : 'primary'" />
                                        <VIcon v-if="item.icon" icon="tabler-credit-card" />
                                        <VImg v-if="item.image" :src="pixImg"
                                            style="max-width: 20px; max-height: 20px;" />
                                        {{ item.text }}
                                    </div>
                                </VListItem>


                                <v-expand-transition>
                                    <VForm @submit.prevent="buyCard" v-if="paymentMethod == 1">
                                        <VCard color="white" class="pa-3">

                                            <VDivider class="mb-3" />

                                            <p class="w-100 text-center mt-1" style="font-weight: 600;">Dados do Cartão
                                            </p>

                                            <VRow>
                                                <VCol cols="12">
                                                    <VLabel>
                                                        Número do cartão
                                                    </VLabel>
                                                    <VTextField v-model="paymentData.cardNumber" outlined required
                                                        placeholder="#### #### #### ####" v-mask="'#### #### #### ####'"
                                                        :rules="[requiredValidator]" />
                                                </VCol>
                                                <VCol cols="12" md="6">
                                                    <VLabel>
                                                        Nome impresso no cartão
                                                    </VLabel>
                                                    <VTextField v-model="paymentData.cardName" outlined required
                                                        placeholder="Nome impresso no cartão"
                                                        :rules="[requiredValidator]" />
                                                </VCol>

                                                <VCol cols="12" md="6">
                                                    <VLabel>
                                                        Data de validade
                                                    </VLabel>
                                                    <VTextField v-model="paymentData.cardDate" outlined required
                                                        placeholder="Ex.: 01/32" v-mask="'##/##'"
                                                        :rules="[requiredValidator]" />
                                                </VCol>

                                                <VCol cols="12" md="6">
                                                    <VLabel>
                                                        CVV (Código de segurança)
                                                    </VLabel>
                                                    <VTextField v-model="paymentData.cardCvv" outlined required
                                                        placeholder="CVV" v-mask="'###'" :rules="[requiredValidator]" />
                                                </VCol>

                                                <VCol cols="12" md="6">
                                                    <VLabel>
                                                        Parcelas
                                                    </VLabel>
                                                    <VSelect v-model="paymentData.parcelas" variant="outlined"
                                                        :items="parcelas" item-title="text" item-value="value"
                                                        placeholder="Selecione a quantidade" required
                                                        :rules="[requiredValidator]" @update:model-value="getPrices" />
                                                </VCol>
                                            </VRow>

                                        </VCard>
                                    </VForm>

                                    <VForm @submit.prevent="buyPix" v-if="paymentMethod == 2">
                                        <VCard color="white" class="pa-3">

                                            <VDivider class="mb-3" />

                                            <p class="w-100 text-center mt-1 mb-1" style="font-weight: 600;">
                                                Confirme a compra para gerar o PIX
                                            </p>
                                            <p class="w-75 text-center text-caption mx-auto">
                                                Após a confirmação, será gerado um PIX para pagamento com validade de 1
                                                hora.
                                                Caso o pagamento não seja efetuado, a compra será cancelada.
                                            </p>

                                        </VCard>
                                    </VForm>

                                </v-expand-transition>

                            </VList>

                        </div>
                    </v-stepper-window>

                    <v-stepper-window v-if="step == 4">
                        <div class="d-flex flex-column align-center mb-2" v-if="!isFree">

                            <img :src="gifLoadingPay" style="max-width: 150px; max-height: 150px;" v-if="buiyng" />
                            <VIcon icon="tabler-circle-check" style="font-size: 120px; color: #4CAF50;"
                                v-if="buyStatus" />
                            <VIcon icon="tabler-alert-triangle" style="font-size: 120px; color: #F44336;"
                                v-if="!buyStatus && !buiyng && !viewQRCode" />

                            <h3 class="mb-4 w-100 text-center">
                                {{ payMessage }}
                            </h3>

                            <VBtn v-if="!buiyng && !buyStatus && !viewQRCode" variant="flat" class="mt-2"
                                color="primary" @click="prevStep()">
                                <VIcon icon="tabler-rotate-2" class="mr-2" />
                                Tentar novamente
                            </VBtn>

                            <VBtn v-if="buyStatus && paymentMethod == 1" variant="flat" class="mt-2" color="primary"
                                @click="abrirRecibo()">
                                <VIcon icon="tabler-receipt" class="mr-2" />
                                Visualizar recibo
                            </VBtn>

                            <div class="d-flex flex-column align-center" v-if="!buiyng && viewQRCode">

                                <p class="w-100 text-center mb-3" v-if="countExpires != '00:00' && viewExp">O PIX gerado
                                    expirará em: <span style="font-weight: 600; color: var(--color-akkiperto);">{{
                                        countExpires
                                    }}</span>
                                </p>
                                <p class="w-100 text-center mb-3" style="color: red;"
                                    v-if="countExpires == '00:00' && viewExp">
                                    O PIX gerado
                                    expirou! Realize
                                    a compra novamente.</p>


                                <p class="w-100 text-center mb-3">Leia pelo aplicativo do seu banco o QRCode abaixo e
                                    efetue
                                    o
                                    pagamento do PIX gerado.</p>
                                <img :src="'data:image/png;base64,' + imageDecodeQRCode" v-if="imageDecodeQRCode"
                                    class="mb-2" style="max-width: 250px;
                            max-height: 250px;
                            border: 5px var(--color-akkiperto) solid;
                            border-radius: 5px;" />
                                <p class="w-100 text-center my-3 d-flex flex-row align-center">
                                    <VDivider class="mx-3" /> ou
                                    <VDivider class="mx-3" />
                                </p>
                                <p class="w-100 text-center mb-3">Copie o código abaixo e efetue o pagamento do PIX
                                    gerado.
                                </p>
                                <VTextarea v-model="codePix" outlined readonly class="mb-2 w-100"
                                    :rows="isMobile ? 3 : 2" />
                                <VBtn v-if="codePix" variant="flat" class="mt-2" color="primary" @click="copyPixCode">
                                    <VIcon icon="tabler-copy" class="mr-2" />
                                    Copiar código
                                </VBtn>

                                <h4 class="mt-4 w-100 text-center">
                                    O sistema irá verificar o pagamento do PIX automaticamente a cada 5 minutos. Você
                                    será
                                    notificado quando o pagamento for confirmado.
                                </h4>
                            </div>

                            <VBtn v-if="buyStatus && !buiyng && !viewQRCode" variant="flat" class="mt-2" color="primary"
                                @click="goMeusIngressos()">
                                <VIcon icon="tabler-ticket" class="mr-2" />
                                Ver Ingressos
                            </VBtn>

                            <VBtn v-if="buyStatus && !buiyng && !viewQRCode && recipetUrl && paymentMethod != 1"
                                variant="flat" class="mt-2" color="primary" @click="abrirRecibo()">
                                <VIcon icon="tabler-receipt" class="mr-2" />
                                Visualizar recibo
                            </VBtn>

                        </div>

                        <div class="d-flex flex-column align-center mb-2" v-else>
                            <img :src="gifLoadingPay" style="max-width: 150px; max-height: 150px;" v-if="buiyng" />

                            <VIcon icon="tabler-circle-check" style="font-size: 120px; color: #4CAF50;"
                                v-if="buyStatus" />
                            <VIcon icon="tabler-alert-triangle" style="font-size: 120px; color: #F44336;"
                                v-if="!buyStatus && !buiyng" />

                            <h3 class="mb-4 w-100 text-center">
                                {{ payMessage }}
                            </h3>

                            <VBtn variant="flat" class="mt-2" color="primary" v-if="buyStatus"
                                @click="goMeusIngressos()">
                                <VIcon icon="tabler-ticket" class="mr-2" />
                                Ver Ingressos
                            </VBtn>
                        </div>
                    </v-stepper-window>

                    <v-stepper-actions class="d-flex flex-column-reverse gap-3">
                        <template #next>
                            <VBtn variant="flat" color="primary"
                                @click="step == 1 ? onSubmitStep1() : step == 3 ? buyHandle() : nextStep()"
                                :disabled="loading" :loading="loading" class="ml-auto w-100" v-if="step != 4">
                                {{ step != 3 ? 'AVANÇAR' : 'CONFIRMAR COMPRA' }}
                                <VIcon :icon="step != 3 ? 'tabler-chevron-right' : ' tabler-circle-check'"
                                    class="ml-2" />
                            </VBtn>

                        </template>
                        <template #prev>
                            <VBtn v-if="step != 1 && step != 4" variant="plain" color="primary" @click="prevStep"
                                :disabled="loading">
                                <VIcon icon="tabler-chevron-left" class="mr-2" />
                                VOLTAR
                            </VBtn>
                        </template>
                    </v-stepper-actions>
                </template>
            </VStepper>
        </VCol>

        <VCol cols="12" md="4" v-if="step !== 4">
            <VCard style="position: sticky;top: 80px;">
                <VCardText>
                    <p class="mb-0 font-weight-bold text-center">Resumo do Pedido</p>

                    <template v-for="(ingresso, index) in ingressos" :key="index">
                        <div class="d-flex flex-row mt-3 gap-3 align-center">
                            <p class="mb-0 font-weight-bold text-primary">
                                {{ ingresso?.buyData?.quantity + 'x' }}
                            </p>
                            <VImg :src="event?.images[0]?.url" cover
                                style="max-width: 60px; max-height: 40px; border-radius: 3px; min-width: 60px; min-height: 40px;" />
                            <div>
                                <p class="mb-0 font-weight-medium" style="max-width: 200px;">
                                    {{ event?.title ?? 'Não informado' }}
                                </p>
                                <p class="mb-1 font-weight-medium text-primary" style="max-width: 200px;">
                                    {{ ingresso?.name ?? 'Não informado' }}
                                </p>
                                <p class="mb-0 text-caption">
                                    <VIcon icon="tabler-calendar" size="14" />
                                    {{ moment(event?.date + ' ' + event?.hora).format('DD/MM/YYYY HH:mm') }}
                                </p>
                                <p class="mb-0 text-caption">
                                    <VIcon icon="tabler-map-pin" size="14" />
                                    <span v-if="event?.enderecoEvento?.place">
                                        {{ event?.enderecoEvento?.place + ' - ' + event?.enderecoEvento?.city + '/' +
                                            event?.enderecoEvento?.state }}
                                    </span>
                                    <span v-else>
                                        {{ event?.enderecoEvento?.street + ', ' + event?.enderecoEvento?.number + ' - '
                                            + event?.enderecoEvento?.neighborhood + ', ' +
                                            event?.enderecoEvento?.city + '/' + event?.enderecoEvento?.state }}
                                    </span>
                                </p>
                            </div>
                            <p class="mb-0 text-primary">
                                {{ formatValue(ingresso?.buyData?.total) }}
                            </p>
                        </div>

                        <VDivider class="my-3" v-if="index !== ingressos.length - 1" />
                    </template>

                    <VDivider class="my-3" />

                    <p class="mb-2">
                        Subtotal
                        <span class="float-right">
                            {{ formatValue(dataTickets.valorSemTaxa) }}
                        </span>
                    </p>

                    <p class="mb-2">
                        Taxa de serviço
                        <span class="float-right">
                            {{ formatValue(dataTickets.taxa) }}
                        </span>
                    </p>

                    <p class="mb-2 text-primary font-weight-medium">
                        Total
                        <span class="float-right">
                            {{ formatValue(dataTickets.total) }}
                        </span>
                    </p>
                </VCardText>
            </VCard>
        </VCol>
    </VRow>
</template>