@extends('site.layouts.app')

@section('title', 'payment')

@section('meta_description', 'This is the description for SEO')
@section('meta_keywords', 'SEO, Keywords, Web Development')
@section('meta_author', 'John Doe')

@section('content')


    <section class="page13-blogs">
        <div class="container">
            <div class="row py-50">
                <div class="panel panel-default credit-card-box">
                    <div class="panel-heading display-table" >
                            <h3 class="panel-title" >Payment Details</h3>
                    </div>
                    <div class="panel-body">
        
                        @if (Session::has('success'))
                            <div class="alert alert-success text-center">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                <p>{{ Session::get('success') }}</p>
                            </div>
                        @endif
        
                        <form 
                                role="form" 
                                action="" 
                                method="post" 
                                class="require-validation"
                                data-cc-on-file="false"
                                data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
                                id="payment-form">
                            @csrf
        
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group required'>
                                    <label class='control-label'>Name on Card</label> <input
                                        class='form-control' size='4' type='text'>
                                </div>
                            </div>
        
                            <div class='form-row row'>
                                <div class='col-xs-12 form-group card required'>
                                    <label class='control-label'>Card Number</label> <input
                                        autocomplete='off' class='form-control card-number' size='20'
                                        type='text'>
                                </div>
                            </div>
        
                            <div class='form-row row'>
                                <div class='col-xs-12 col-md-4 form-group cvc required'>
                                    <label class='control-label'>CVC</label> <input autocomplete='off'
                                        class='form-control card-cvc' placeholder='ex. 311' size='4'
                                        type='text'>
                                </div>
                                <div class='col-xs-12 col-md-4 form-group expiration required'>
                                    <label class='control-label'>Expiration Month</label> <input
                                        class='form-control card-expiry-month' placeholder='MM' size='2'
                                        type='text'>
                                </div>
                                <div class='col-xs-12 col-md-4 form-group expiration required'>
                                    <label class='control-label'>Expiration Year</label> <input
                                        class='form-control card-expiry-year' placeholder='YYYY' size='4'
                                        type='text'>
                                </div>
                            </div>
        
                            <div class='form-row row'>
                                <div class='col-md-12 error form-group hide'>
                                    {{-- <div class='alert-danger alert'>Please correct the errors and try
                                        again.</div> --}}
                                </div>
                            </div>
        
                            <div class="row">
                                <div class="col-xs-12">
                                    <button type="button" class="btn btn-warning btn-lg btn-block">Pay</button>
                                  
                                </div>
                            </div>
                                
                        </form>
                    </div>
                </div>        
            </div>
        </div>
        </div>

    </section>

    @endsection