@extends("layouts.app")
@section("content")

    <!-- Begin: Main Slider -->


    <div class="main-slider">
        <img class="img-fluid w-100" src="{{asset('images/innerBnnr.jpg')}}" alt="First slide">
        <div class="carousel-caption">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-uppercase">PAYMENT</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->


    <!-- Begin: Step 3 -->
    <div class="checkOutStyle">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-md-12">
                    <div class="title text-center">
                        <h2>Payment Methods</h2>
                    </div>
                </div>
                <div class="col-lg-8 col-md-12">
                    <!-- Display a payment form -->
                    <form id="payment-form">
                        <div id="payment-element">
                            <!--Stripe.js injects the Payment Element-->
                        </div>
                        <button id="submit">
                            <div class="spinner hidden" id="spinner"></div>
                            <span id="button-text">Pay now</span>
                        </button>
                        <div id="payment-message" class="hidden"></div>
                    </form>
{{--                    <form action="{{ route('accept.payment') }}" class="row formStyle" method="get">--}}
{{--                        <div class="col-md-12 mb-4 text-center">--}}
{{--                            <img src="{{asset('images/card-img.png')}}" alt="">--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <label>Card Number</label>--}}
{{--                            <input type="text" class="form-control" placeholder="CARD NUMBER">--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <label>name on card</label>--}}
{{--                            <input type="text" class="form-control" placeholder="CARD TITLE">--}}
{{--                        </div>--}}
{{--                        <div class="col-md-4">--}}
{{--                            <label>expiration date</label>--}}
{{--                            <input type="text" class="form-control" placeholder="MM/YY">--}}
{{--                        </div>--}}
{{--                        <div class="col-md-2">--}}
{{--                            <label>CVV</label>--}}
{{--                            <input type="text" class="form-control" placeholder="***">--}}
{{--                        </div>--}}
{{--                        <div class="col-md-6">--}}
{{--                            <div class="checkbox mt-4">--}}
{{--                                <input type="checkbox" id="box-2">--}}
{{--                                <label for="box-2"><h5>save card</h5>information is encrypted and securely--}}
{{--                                    stored.</label>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col-md-12 mt-4 text-center">--}}
{{--                            <button class="btnStyle">Place Order</button>--}}
{{--                        </div>--}}
{{--                    </form>--}}
                </div>
            </div>

        </div>
    </div>
    <!-- END: Step 3 -->

@endsection