@extends('cabMeWebsite.master')
<style>

    .input-container {
        display: -ms-flexbox; / IE10 /
    display: flex;
        width: 100%;
        margin-bottom: 15px;
    }
    .icon {
        padding: 10px;
        background: dodgerblue;
        color: white;
        min-width: 50px;
        text-align: center;
    }.input-field {
         width: 100%;
         padding: 10px;
         outline: none;
     }

    .input-field:focus {
        border: 2px solid dodgerblue;
    }

</style>
@section('content')


    <section class="">
        <script  src="https://js.stripe.com/v2/"></script>
        <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
        <div class="container">
            <div class="col-12">
                <div class="row">
                    <div class="add-payment ml-auto mr-auto mb-2 mb-sm-3 mb-md-5 mt-2 mt-sm-3 mt-md-5">
                        <form id="formdata" class="mt-2 mt-sm-3 mt-sm-4">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="cash">
                                <input class="form-control" type="hidden" name="user_id" id="user_id" value="{{$_SESSION['userid']}}"  />
                                <a href="{{url('/managecard')}}">
                                   <img class="ml-1 m-sm-0" src="{{asset('laravel-website')}}/img/back_btn.png" style="width: 15px;height: 20px;"/>
                                </a>
                                <br>
                                <div class="text-center fs25 mb-2 mb-sm-3 mb-md-4 col-12 ">Add Card</div>
                                <input  type="hidden" id="stripeToken" value="" name="card_token_number">
                                <input  type="hidden" id="customer_stripe_id" value="{{ $_SESSION['stripe_customer_id'] }}" name="customer_id" >
                               {{-- <div class="form-group">
                                    <div class="row">
                                    <div class="input-container col-12">
                                        <input  type="hidden" id="customer_id" value="cus_FzRu0GIaGDaZew" name="customer_id"/>
                                        <input type="text" name="card_number" maxlength="16"  class="form-control input-field" placeholder="Card Number"/>

                                        <img class="ml-2 m-sm-0" src="{{asset('laravel-website')}}/img/card_icon.png" class="float-right"/>
                                    </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-6 col-md-6 col-sm-6 col-lg-6">
                                    <label class="text-al">Exp.Date</label>

                                        <div class="input-container col-12 ">

                                       <input type="text" id="exp_month" name="exp_month" class=" form-control" placeholder="MM"/>--}}{{--
                                        <select id="exp_month" name="exp_month" class=" form-control" >
                                            <option value="january">January</option>
                                            <option value="february">February</option>
                                            <option value="march">March</option>
                                            <option value="april">April</option>
                                            <option value="may">May</option>
                                            <option value="june">June</option>
                                            <option value="july">July</option>
                                            <option value="august">August</option>
                                            <option value="september">September</option>
                                            <option value="october">October</option>
                                            <option value="november">November</option>
                                            <option value="december">December</option>
                                        </select>--}}{{--
                                        </div>

                                    </div>
                                    <div class="form-group col-6 col-md-6 col-sm-6 col-lg-6">
                                    <div class="input-container col-12"><br>
                                        <input type="text" id="exp_year" maxlength="2" name="exp_year" min="1" step="1"  class=" form-control" placeholder="YY"/>
                                    </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-12 ">
                                        <label class="text-al">CVV</label>
                                            <input type="text" maxlength="3" name="cvv"  class=" form-control" min="1" step="1" placeholder="123"/>
                                    </div>
                                </div>--}}
                                <br><br>
                                <div id="card-element">
                                    <!-- a Stripe Element will be inserted here. -->
                                </div>
                                <!-- Used to display form errors -->
                                <div id="card-errors" role="alert"></div>
                            </div>

                            <div class="mt-3 mt-sm-4 mt-md-5 border-top text-center">
                                <button type="button"  class="theme-btn-small mt-3 mt-sm-4" style="width:60%" id="save_card">Save Card</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script type="text/javascript">
        $(document).ready(function () {
            // $.ajaxSetup({
            //     headers: {
            //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            //     }
            // });
            var base_url = '