@extends('layouts.dashboard')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card mt-5">
                <h3 class="card-header p-3">Payment</h3>
                <div class="card-body">

                    @session('success')
                        <div class="alert alert-success" role="alert">
                            {{ $value }}
                        </div>
                    @endsession

                    @session('error')
                    <div class="alert alert-danger" role="alert">
                        {{ $value }}
                    </div>
                @endsession

                    <form id='checkout-form' method='post' action="{{ route('pay') }}">
                        @csrf

                        <strong>Name:</strong>
                        <input type="input" class="form-control" name="name" value="{{ auth()->user()->name }}" readonly placeholder="Enter Name">

                        <input type='hidden' name='quantity' id='quantity'>
                        <input type='hidden' name='id' id='service_id'>

                        <input type='hidden' name='stripeToken' id='stripe-token-id'>
                        <br>
                        <div id="card-element" class="form-control" ></div>

                        <button
                            id='pay-btn'
                            class="btn btn-success mt-3"
                            type="button"
                            style="margin-top: 20px; width: 100%;padding: 7px;"
                            onclick="createToken()">PAY $<span id="total_amt">0</span>
                        </button>
                    <form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')


<script type="text/javascript">

$("#quantity").val(sessionStorage.getItem("quantity"));
$("#service_id").val(sessionStorage.getItem("service_id"));
$("#total_amt").text(sessionStorage.getItem("total_amt"));

    var stripe = Stripe('{{ config('services.stripe.stripe_publish_key') }}')
    var elements = stripe.elements();
    var cardElement = elements.create('card');
    cardElement.mount('#card-element');

    /*------------------------------------------
    --------------------------------------------
    Create Token Code
    --------------------------------------------
    --------------------------------------------*/
    function createToken() {
        document.getElementById("pay-btn").disabled = true;
        stripe.createToken(cardElement).then(function(result) {

            if(typeof result.error != 'undefined') {
                document.getElementById("pay-btn").disabled = false;
               // alert(result.error.message);
            }

            /* creating token success */
            if(typeof result.token != 'undefined') {
                document.getElementById("stripe-token-id").value = result.token.id;
                document.getElementById('checkout-form').submit();
            }
        });
    }
</script>
@endpush