@extends('layouts.master')

@section('extra-script')
<script src="https://js.stripe.com/v3/"></script>
@endsection

@section('content')

    <div class="col-md-12">
        <h1>Page de paiement</h1>
        <div class="row">
            <div class="div col-md-6">
                <form action="#" class="my-4">
                    <div id="card-element">

                    </div>
                    <div id="card-errors" role="alert"></div>

                    <button class="btn btn-success mt-4" id="submit">Procéder au paiement</button>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('extra-js')
<script>
    var stripe = Stripe("pk_test_TYooMQauvdEDq54NiTphI7jx");
    var elements = stripe.elements();
    var style = {
        base: {
            color: "#32325d",
            fontFamily: "Helvetica Neue, Helvetica, sans-serif",
            fontSmoothing: "antialiased",
            fontSize: "16px",
            "::placeholder": {
                color: "#aab7c4"
            }
            },
            invalid: {
                color: "#fa755a",
                iconColor: "#fa755a"
            }
        };
    var card = elements.create("card", { style: style });
    card.mount("#card-element");
    card.addEventListener('change', ({error}) => {
    const displayError = document.getElementById('card-errors');
        if(error){
            displayError.classList.add('alert', 'alert-warning');
            displayError.textContent = error.message;
        } else {
            displayError.classList.remove('alert', 'alert-warning');
            displayError.textContent = '';
        }
    });

    var submitButton = document.getElementById("submit");

    submitButton.addEventListener("click", function (ev) {
    ev.preventDefault();
    stripe.confirmCardPayment("{{ $clientSecret }}", {
        payment_method: {
            card: card
        }
        }).then(function(result){
            if(result.error){
                console.log(result.error.message);
            } else {
                if (result.paymentIntent.status == "succeeded" ){
                    console.log(result.paymenIntent);
                }
            }
        });
    });

</script>
@endsection