@extends('layouts.app')
@section('page_description')
    Course Checkout
@endsection

@section('content')
<!-- course checkout page start -->
<section class="checkout-page">
    <div class="container">
        <div class="row">
            <div class="col-xl-8 col-md-8 col-xs-12">
                <div class="checkout-wrapper">
                    <div class="account-section billing-section">
                        <h4 class="wrapper-heading">Payment Details</h4>
                        <form action="{{ route('place_order') }}" method="POST" class="payment-form" data-stripe-key="{{ env('STRIPE_KEY') }}">
                            @csrf
                            <input type="hidden" name="course_id" value="{{ $course['Course Id']}}">

                            <div class="review-form">
                                <div class="review-field">
                                    <label for="card_number">Card Number</label>
                                    <input type="text" name="card_number" id="card_number" class="@error('card_number') is-invalid @enderror" autofocus required>

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

                                <div class="review-field">
                                    <label for="owner_name">Cardholder Name</label>
                                    <input type="text" name="cardholder_name" id="owner_name" class="@error('cardholder_name') is-invalid @enderror" required>

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

                                <div class="review-field-full">
                                    <div class="review-field">
                                        <label for="expiry_date">Expires On</label>
                                        <input type="text" name="card_expiry" id="expiry_date" placeholder="MM/YYYY" class="@error('card_expiry') is-invalid @enderror" required>

                                        <span class="invalid-feedback" role="alert">
                                            <strong>
                                                @error('card_expiry')
                                                    {{ $message }}
                                                @enderror
                                            </strong>
                                        </span>
                                    </div>
                                    
                                    <div class="review-field">
                                        <label for="card_cvv">CVV</label>
                                        <input type="password" name="card_cvv" id="card_cvv" class="@error('card_cvv') is-invalid @enderror" required>

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

                                <div class="review-field mb-0">
                                    <button type="submit" class="add-card">Place Order</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 col-md-4 col-xs-12">
                <div class="prdct_cart_rgt">
                    <h4 class="prdc_header">Price Details</h4>
                    <div class="cart_bill">
                        <ul class="list-inline">
                            {{-- <li><span>Price (2 items)</span><span>$ 15,998</span></li>
                            <li><span>Price (2 items)</span><span>$ 15,998</span></li>
                            <li><span>Price (2 items)</span><span>$ 15,998</span></li>
                            <li><span>Price (2 items)</span><span>$ 15,998</span></li>
                            </li> --}}
                            <li>
                                <span>{{ $course['Course Name']}}</span>
                                <span>{{ "$ " . $course_price }}</span>
                            </li>
                        </ul>
                    </div>
                    <h5>Total Amount <span>{{ "$ " . $course_price }}</span></h5>
                    <h6>You will save <span>{{ "$ " . $discount}}</span> on this order</h6>
                </div>
                <div class="subtotal payment-type">
                    {{-- <div class="checkbox-item">
                        <input type="radio" id="bank" name="bank">
                        <div class="bank">
                            <h5 class="wrapper-heading">Direct Bank Transfer</h5>
                            <p class="paragraph">Make your payment directly into our bank account.
                                Please use
                                <span class="inner-text">
                                    your Order ID as the payment reference.
                                </span>
                            </p>
                        </div>
                    </div> --}}
                    <div class="checkbox-item">
                        <input type="radio" id="credit" name="bank" checked="true">
                        <div class="credit">
                            <h5 class="wrapper-heading">Credit/Debit Cards or Paypal</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- course checkout page end -->
@endsection

@push('scripts')
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
    $(function () {
        $('form.payment-form').bind('submit', function(e) {
            e.preventDefault();
            let form = $('form.payment-form')[0];
            let cardExpiry = $('#expiry_date').val();
            const card_regex = new RegExp(/^(0[1-9]|1[0-2])\/(2[0-9]{3}$)/);

            if (!card_regex.test(cardExpiry)) {
                $('#expiry_date').addClass('is-invalid');
                $('#expiry_date').parent().find('span.invalid-feedback strong').text("Please Enter Expires On in MM/YYYY Format");
                return false;
            }

            let cardExpiryArray = cardExpiry.split('/');
            let expiryMonth = cardExpiryArray[0];
            let expiryYear = cardExpiryArray[1];
            Stripe.setPublishableKey($(form).data('stripe-key'));
            Stripe.createToken({
                'number': $('#card_number').val(),
                'cvc': $('#card_cvv').val(),
                'exp_month': expiryMonth,
                'exp_year': expiryYear
            }, stripeResponseHandler);
        });


        function stripeResponseHandler(status, response) {
            let form = $('form.payment-form')[0];

            if (response.error) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
                $(form).before(`<div class="alert alert-danger" role="alert">${response.error.message}</div>`);
                return false;
            } else {
                console.log(response);
                let token = response['id'];

                $(form).append("<input type='hidden' name='stripe_token' value='" + token +"'/>");
                form.submit();
            }
        }
    })
</script>
@endpush