@assets
<script src="https://sdk.mercadopago.com/js/v2"></script>
@endassets

<section id="plans" class="py-2 min-vh-100" style="background-image: url({{asset('img/home-panel/PLANES.jpg')}});">
<div class="col-sm-12 py-5">
    <div class="d-flex justify-content-between top-text pb-4 align-content-center ">
        <div class="container text-center" x-data="pay">
            <div class="bg d-flex flex-column justify-content-center h-100 text-center">
                <h2 class="fs-sm-24 mb-0 fs-21 fw-bold text-center text-dark">Realizar el pago de $ {{ $finalPrice }}<span style="color: #F1B20A;">.</span></h2>
                @csrf
                <div class="row justify-content-md-center mt-2">
                    <div class="col-6">
                        <div class="cardPaymentBrick_container"></div>
                    </div>
                </div>
                <div class="row justify-content-md-center mt-2 d-none d-sm-none">
                    <div class="col-6">
                        <a class="btn btn-dark d-block rounded-pill fw-700 py-2 my-3 w-100 mt-1" @click="handleBack">Volver</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</section>

@script
<script type="text/javascript">
    Alpine.data('pay', () => ({
        init() {
            $('#panel-sidebar').hide()
            setTimeout(() => {
                const csrfToken = document.getElementsByName('_token')[0].value

                let randomId = 'x_' + Math.random().toString(36).substr(2, 10);

                document.getElementsByClassName('cardPaymentBrick_container')[0].id = randomId


                let mp = new MercadoPago("{{config('services.mercado_pago.public_key')}}", {
                    locale: 'es-AR'
                });
                const bricksBuilder = mp.bricks();
                let renderCardPaymentBrick = async (bricksBuilder) => {
                    const settings = {
                        initialization: {
                            amount: "{{ $finalPrice }}",
                            preferenceId: "{{uniqid()}}",
                            payer: {
                                firstName: "",
                                lastName: "",
                                email: "",
                            },
                        },
                        customization: {
                            visual: {
                                style: {
                                    theme: "default",
                                },
                            },
                            paymentMethods: {
                                maxInstallments: 1,
                            }
                        },
                        callbacks: {
                            onReady: () => {
                                // callback llamado cuando Brick esté listo
                            },
                            onSubmit: (cardFormData) => {
                                return new Promise((resolve, reject) => {
                                    fetch("/invitations/process_payment", {
                                            method: "POST",
                                            headers: {
                                                "Content-Type": "application/json",
                                                "X-CSRF-TOKEN": csrfToken
                                            },
                                            body: JSON.stringify({
                                                ...cardFormData,
                                                description: "UPGRADE({{$invitation->id}})|{{$invitation->plan->name}} -> {{$selectedPlan->plan->name}}",
                                            })
                                        })
                                        .then((response) => response.json())
                                        .then((response) => {
                                            let data = JSON.parse(response)
                                            if(data.status != 'approved'){
                                                // Redirect silently to friendly error page when payment not approved
                                                window.location.href = '/payment-failed';
                                                return
                                            }
                                            window.cardPaymentBrickController.unmount()
                                            alert('Plan actualizado con exito!!!')
                                            $wire.finish(data)
                                            resolve();
                                        })
                                        .catch((error) => {
                                            console.log('error')
                                            console.log(error)
                                            // tratar respuesta de error al intentar crear el pago
                                            reject();
                                        })
                                });
                            },
                            onError: (error) => {
                                console.log('ERROR')
                                console.log(error)
                            },
                        },
                    };
                    window.cardPaymentBrickController = await bricksBuilder.create('cardPayment', randomId, settings);
                };
                renderCardPaymentBrick(bricksBuilder);
            }, 100)
        },
        handleBack() {
            window.cardPaymentBrickController.unmount()
            Livewire.navigate('/invitations/{{$invitation->id}}/upgrade')
        }
    }));
</script>
@endscript