@extends('layouts.app')
@section('content')
<section class="main-sec member-sec">
    <div class="container">
        <div class="container">
            <div class="signup-wrapper">
                <div class="subscription-card-box">
                    <div class="sub-card-inner">
                        <h4>Hosted Event</h4>
                        <div class="sub-card-prize">
                            <h3>{{ $event['event_name'] ?? ''}}</h3>

                            <h4>${{ $event['event_fee'] ?? '' }}</h4>
                        </div>
                        <h4>Subscription</h4>
                        <div class="sub-card-prize">
                            <h3>{{ $plan->name ?? ''}}</h3>

                            <h4>${{ $plan->price ?? '' }}</h4>
                        </div>
                        <div class="sub-coupon-box">
                            <div class="sub-coupon-detials">
                                <h3>sub-coupon</h3>
                                <span>if any</span>
                            </div>
                            <div class="sub-coupon-code"></div>
                        </div>
                        <div class="sub-total-data">
                            <h3>Total</h3>
                            <h2>${{ $event['event_fee'] + $plan->price }}</h2>
                        </div>
                    </div>
                </div>
                <div class="card-details-form">
                    <form action="{{ route('member.event.payment.store', ['userId' => $user->id]) }}" id="paymentForm" method='post'>
                        <h3>Card Details</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-0">
                                    <div class="form-field form-custom-height">
                                        <div id='cardNumberElement'></div>
                                        <span class="form-icon">
                                            <img src="images/multi-cards.svg" alt="">
                                        </span>
                                        <label id='cardNumberError' class="stripe-error-messages error-message"></label>
                                    </div>


                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-0">
                                    <div class="form-field form-custom-height">
                                        <div id="cardExpiryElement"></div>

                                    </div>
                                    <label id='cardExpiryError' for="cardExpiryElement" class="stripe-error-messages error-message"></label>


                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group mb-0">
                                    <div class="form-field">
                                        <div id="cardCVCElement"></div>

                                        <span class="form-icon">
                                            <img src="images/debit-card.svg" alt="">
                                        </span>
                                    </div>
                                    <label id='cardCVCError' for="cardCVCElement" class="stripe-error-messages error-message"></label>

                                </div>
                            </div>
                            <div class="col-6 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <div class="form-field">
                                            <input type="text" name='first_name' class="form-control @error('first_name') is-invalid @enderror" placeholder="First Name">
                                        </div>
                                        <span class="form-icon">
                                            <img src="images/dropdown-icon.svg" alt="">
                                        </span>
                                        @error('first_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                            <div class="col-6 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <input type="text" name='last_name' class="form-control @error('last_name') is-invalid @enderror" placeholder="Last Name">
                                    </div>
                                    @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <input type="text" name='address' class="form-control @error('address') is-invalid @enderror" placeholder="Address">

                                    </div>
                                    @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <input type="text" name='city' class="form-control @error('city') is-invalid @enderror" placeholder="City">

                                    </div>
                                    @error('city')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <input type="hidden" name='plan_id' value="{{ jsencode_userdata($user->plan_id) }}">
                            <input type="hidden" id='user-id' name='user_id' value="{{ jsencode_userdata($user->id) }}">
                            <div class="col-4 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <select name="state" id="" class="form-control @error('state') is-invalid @enderror">
                                            <option value="">Select Any</option>
                                            <option value="Haryana">Haryana</option>
                                            <option value="Mumbai">Mumbai</option>
                                            <option value="kerala">kerala</option>
                                            <option value="Other">Other</option>
                                        </select>
                                        <span class="form-icon">
                                            <img src="images/dropdown-icon.svg" alt="">
                                        </span>
                                    </div>
                                    @error('state')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-4 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <input type="text" name='zip_code' class="form-control @error('zip_code') is-invalid @enderror" placeholder="789546">
                                    </div>
                                    @error('zip_code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-4 user_cardDetail">
                                <div class="form-group">
                                    <div class="form-field">
                                        <select name="country" id="" class="form-control @error('country') is-invalid @enderror">
                                            <option value="">Select Any</option>
                                            <option value="US">United State</option>
                                            <option value="IND">India</option>
                                            <option value="UAE">UAE</option>
                                            <option value="UK">UK</option>
                                        </select>
                                        <span class="form-icon">
                                            <img src="images/dropdown-icon.svg" alt="">
                                        </span>
                                    </div>
                                    @error('country')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button href="" id='payNow' type='submit' class="button primary-btn full-btn">Subscribe <div class="spinner-border d-none" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="paymentFailed" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body modal-custm-body">
                <div class="comman-modal-box">
                    <img src="{{ asset('images/otp-img.svg') }}" alt="">
                    <h3>Unfortunately</h3>
                    <p>Unable to proceed with payments</p>
                    <a href="#" class="button primary-btn full-btn" data-bs-dismiss="modal" aria-label="Close">TRY AGAIN</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
@include('validations.js_card-detail' , ['required' => false])
<script>
    var stripe = Stripe(
        "{{ env('STRIPE_KEY') }}"
    );

    var client_secret = "{{ $user->createSetupIntent()->client_secret }}"
    var elements = stripe.elements();

    var style = {
        base: {
            padding: '14px 50px 14px 27px',
            fontSize: '14px',
            fontWeight: '500',
            border: '1px solid #fff',
            background: '#111',
            color: '#fff',
            borderRadius: '5px',

        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    // create inputs for cardName,CardNumber,cardExpiry,cardCvc
    var cardNumberElement = elements.create('cardNumber', {
        style: style,
        showIcon: true,
        placeHolder: '1234 1234 1234 1234',
        classes: {
            base: 'stripe-element',
            invalid: 'error'
        }
    });
    cardNumberElement.mount('#cardNumberElement');
    var cardExpiryElement = elements.create('cardExpiry', {
        style: style,
        classes: {
            base: 'stripe-element',
            invalid: 'error'
        }
    });
    cardExpiryElement.mount('#cardExpiryElement');
    var cardCvcElement = elements.create('cardCvc', {
        style: style,
        placeholder: 'CVC',
        classes: {
            base: 'stripe-element',
            invalid: 'error'
        }
    });
    cardCvcElement.mount('#cardCVCElement');
    cardNumberElement.on('change', function(event) {
        if (event.error) {
            jQuery('#cardNumberError').text(event.error.message);
        } else {
            jQuery('#cardNumberError').text('');
        }
    });
    cardExpiryElement.on('change', function(event) {
        if (event.error) {
            jQuery('#cardExpiryError').text(event.error.message);
        } else {
            jQuery('#cardExpiryError').text('');
        }
    });
    cardCvcElement.on('change', function(event) {
        if (event.error) {
            jQuery('#cardCVCError').text(event.error.message);
        } else {
            jQuery('#cardCVCError').text('');
        }
    });


    var form = document.getElementById('paymentForm')
    var cardBtn = document.getElementById('payNow')

    form.addEventListener('submit', async (e) => {
        jQuery('#paymentForm').find('button').children('.spinner-border').removeClass('d-none')
        jQuery('#paymentForm').find('button').attr('disabled', true)
        e.preventDefault()
        let userId = jQuery('#user-id').val();
        const {
            setupIntent,
            error
        } = await stripe.confirmCardSetup(
            client_secret, {
                payment_method: {
                    card: cardNumberElement,
                }
            }
        )
        if (error) {
            cardBtn.disable = false
            // console.log(error, 'kdlsafjs;ldfj')
            jQuery('#paymentForm').find('button').children('.spinner-border').addClass('d-none')
            jQuery('#paymentForm').find('button').attr('disabled', false)

        } else {
            let token = document.createElement('input')
            token.setAttribute('type', 'hidden')
            token.setAttribute('name', 'payment_method')
            token.setAttribute('value', setupIntent.payment_method)
            form.appendChild(token)
            // form.submit();
            let updatedForm = jQuery('#paymentForm');
            // let form = jQuery('#paymentForm')
            let url = updatedForm.attr('action');
            let data = updatedForm.serialize();

            if (updatedForm.valid()) {
                updatedForm.attr('disabled', true);
                let response = ajaxCall(url, 'post', data);
                response.then(function(response) {
                    let userId = response.data.id;
                    window.location.href=`{{ route('member.event.welcome')}}?user_id=${userId}`;

                    })
                    .catch(error => {
                        jQuery('#paymentFailed').modal('show');
                        // iziToast.error({
                        //     title: 'Error',
                        //     message: 'Something went wrong!',
                        //     position: 'topRight'
                        // });
                        console.error('Error:', error);
                    });
            }

        }
    })
</script>
@endpush