@extends('front.layout.app')
@section('title', 'Our Team')

@section('content')
    <section class="main-slider innerBanner p-0" id="mainSlider"
        style="background-image: url('{{ asset('front/images/mainBanner.webp') }}');">
        <div class="container">
            <div class="row justify-content-end">
                <div class="col-lg-6">
                    <div class="slideOne">
                        <h1 class="mainHeading text-white">{{ 'Payment' }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="checkout-section padd-y my-5">
        <div class="container my-5">
            <div class="row my-5">
                <div class="col-md-12 my">
                    <div class='form-row row'>
                        <div style="display: none" class='col-md-12 error form-group hide'>
                            <div class='alert-danger alert'>
                                Please correct the errors and try again.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 m-auto">

                    <form action="{{ route('front.donation.payment') }}" role="form" method="POST"
                        data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_KEY') }}" id="payment-form"
                        class="contactForm">
                        @csrf
                        <div class="contactForm">
                            <h3>Payment Methods</h3>
                            <div class="row">
                                <div class="col-6">
                                    <input type="text" placeholder="Cardholder Name" name="cardholder_name "
                                        class="form-control" required>
                                </div>
                                <div class="col-6">
                                    <input type="text" placeholder="Card Number" name="card_number"
                                        class="card-number form-control "required>
                                </div>
                                <div class="col-md-3">
                                    <input type="text" placeholder="MM" name="exp_month"
                                        class="card-expiry-month form-control" required>
                                </div>
                                <input type="hidden" name="amount" value="{{ $amount }}">
                                <div class="col-md-3">
                                    <input type="text" placeholder="YYYY" name="exp_year"
                                        class="card-expiry-year form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" placeholder="CVC" name="cvv" class="card-cvc form-control"
                                        required>
                                </div>
                            </div>
                            <div class="col-md-12 text-center">
                                <button class="themeBtn themeBtn1">Donate $
                                    {{ $amount ?? '' }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')

    <script type="text/javascript">
        $(function() {

            /*------------------------------------------
            --------------------------------------------
            Stripe Payment Code
            --------------------------------------------
            --------------------------------------------*/
            var $form = $(this);

            $('#payment-form').on('submit', function(e) {
                e.preventDefault();


                let cardNumber = $('.card-number').val();
                let cardCVC = $('.card-cvc').val();
                let cardExpMonth = $('.card-expiry-month').val();
                let cardExpYear = $('.card-expiry-year').val();




                var $form = $(this);
                var $errorMessage = $form.find('div.error');
                $errorMessage.addClass('hide');

                $('.has-error').removeClass('has-error');

                if (cardNumber === '' || cardCVC === '' || cardExpMonth === '' || cardExpYear === '') {
                    return;
                }
                var $form = $(this),
                    $errorMessage = $form.find('div.error'),
                    valid = true;
                $errorMessage.addClass('hide');

                $('.has-error').removeClass('has-error');

                if (!$form.data('cc-on-file')) {
                    e.preventDefault();

                    let stripePublishableKey = $form.data('stripe-publishable-key');
                    console.log('stripePublishableKey', stripePublishableKey);

                    Stripe.setPublishableKey(stripePublishableKey);
                    Stripe.card.createToken({
                        number: cardNumber,
                        cvc: cardCVC,
                        exp_month: cardExpMonth,
                        exp_year: cardExpYear,
                    }, function(status, response) {
                        console.log('Tokenization response:', response);


                        if (response.error) {
                            console.log('Error', response);

                            $('.error')
                                .removeClass('hide')
                                .removeAttr('style')
                                .find('.alert')
                                .text(response.error.message);
                        } else {
                            console.log(response);


                            $form.append("<input type='hidden' name='payment_method_id' value='" +
                                response.id + "'/>");

                            $form.get(0).submit();
                        }
                    });
                }


            });
        });
    </script>
@endsection