@push('css2')
<style type="text/css">
</style>
@endpush
@php
$payment_platform = collect(config('app.payment_platforms'))->where('code','=','stripe')->first();
@endphp
<h5 class="" style="margin-bottom: 15px;">
    <strong>{{$payment_platform['name']}}</strong>
</h5>
<div style="margin-left: 20px; padding: 10px; border: 1px solid #cdcdcd;" id="stripeElement">
</div>
<!--<div style="margin-left: 20px; padding: 10px; border: 1px solid #cdcdcd;" id="stripeElement">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="form-group form-group-sm">
                {!! html_entity_decode(Form::label('card_number', __('shop/cart.entry_card_number') . '', ['class' => 'control-label'])) !!}
                <div id="card_number" style="background: #fafafa; padding: 5px 3px;"></div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="form-group form-group-sm">
                {!! html_entity_decode(Form::label('card_expiry', __('shop/cart.entry_card_expiry') . '', ['class' => 'control-label'])) !!}
                <div id="card_expiry" style="background: #fafafa; padding: 5px 3px;"></div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="form-group form-group-sm">
                {!! html_entity_decode(Form::label('card_cvc', __('shop/cart.entry_card_cvc') . '', ['class' => 'control-label'])) !!}
                <div id="card_cvc" style="background: #fafafa; padding: 5px 3px;"></div>
            </div>
        </div>
    </div>
</div>-->
<div class="text-danger" style="padding-left: 20px; padding-top: 10px;" id="stripeErrors">
</div>
<p style="padding-left: 20px; padding-top: 10px;">
    <strong>{!! sprintf(__('shop/cart.text_platform_payment_amount'),\App\Helpers\Helper::numberFormatMoney($total,2)) !!}</strong>
</p>
<div style="padding-left: 20px;">
{!! Form::button(__('general.button_stripe'),['type' => 'button', 'class' => 'btn btn-success', 'id' => 'button_pay_stripe' ]) !!}
</div>
<h5 class="" style="margin-top:20px; margin-bottom: 15px;">
    <strong>@lang('shop/cart.text_confirm_payment_activate_folios')</strong>
</h5>
<p style="padding-left: 20px;">
    {!! config('services.stripe.text_confirm_payment') !!}
</p>
@push('scripts2')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ config('services.stripe.key') }}')
    const elements = stripe.elements({locale: 'es'})
    /*const cardNumber = elements.create('cardNumber');
    cardNumber.mount('#card_number');
    const cardExpiry = elements.create('cardExpiry');
    cardExpiry.mount('#card_expiry');
    const cardCvc = elements.create('cardCvc');
    cardCvc.mount('#card_cvc');*/
    const cardElement = elements.create('card',  {})
    cardElement.mount('#stripeElement')
</script>
<script>
    const form = document.getElementById('form_process')
    const payButton = document.getElementById('button_pay_stripe')
    const stripeErrors = document.getElementById('stripeErrors')

    payButton.addEventListener('click', async(e) => {
        e.preventDefault();
        stripeErrors.textContent = ''

        const {paymentMethod, error} = await stripe.createPaymentMethod(
            'card', cardElement, {
                billing_details: {
                    'name': '{{auth()->user()->name}}',
                    'email': '{{auth()->user()->email}}',
                }
            }
        )

        if(error){
            stripeErrors.textContent = error.message
        }else{
            $("#form_process input[name='stripe_payment_method']").val(paymentMethod.id);
            form.submit()
        }
    })
</script>
@endpush