@extends('layout')
@section('page_title', __('randoloc.order.title'))
@section('content')
    <div class="container mx-auto pt-20 mb-4 mt-10">
        <div class="row row-cols-1 md:row-cols-2">
            <div class="border-r-4 col">
                <div class="w-full pt-10 text-center text-2xl">


                    <div class="">
                        <img class="inline-block" src="{{$product->picture->url}}"/>
                    </div>
                    <div class="">
                        {{$product->name}}
                    </div>
                    <div class="row row-cols-2">
                        <div class="product-criterion">
                            @foreach($declination->criterions as $criterion)
                                <span class="font-bold">{{$criterion->slug}}</span> : {{$criterion->pivot->value}}<br/>
                            @endforeach
                        </div>
                        <div class="product-price">
                            <span class="">{{$order->productTotal}}€</span>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col">
                <div class="w-full">


                    <h1 class="mb-2 text-4xl font-bold">Ma commande</h1>

                    <div class="row row-cols-2 mb-2 border-b-2">
                        <div class="col text-left font-bold">Produit :</div>
                        <div class="col text-right">{{$order->productTotal}}€</div>
                    </div>
                    <div class="row row-cols-2 mb-2 border-b-2">
                        <div class="text-left font-bold">Frais de service {{$order->data['platformBuyerFeesRate'] *100}}%:</div>
                        <div class="col text-right">{{$order->data['platformBuyerFees']}}€ </div>
                    </div>
                    <div class="row row-cols-2 mb-2 border-b-2">
                        <div class="text-left">Frais de port :</div>
                        <div class="col text-right">{{$order->data['platformBuyerShipping']}}€ </div>
                    </div>

                    <div class="row row-cols-2 mb-2 border-b-2">
                        <div class="col text-left font-bold">Total :</div>
                        <div class="col text-right">{{$order->total +  $order->discountTotal }}€</div>

                    </div>

                    @if($order->discountTotal)
                        <div class="row row-cols-2 ">
                            <div class="text-left font-bold">Remise :</div>
                            <div class="text-right">{{$order->discountTotal}}€</div>
                        </div>

                        <div class="row row-cols-2 mb-2 border-b-2">
                            <div class="text-left font-bold">Total avec remise:</div>
                            <div class="text-right"> {{$order->total }}€</div>
                        </div>
                    @endif


                    <div class="row mb-4 border-b-2">
                        <div>
                            <div class="font-bold">Adresse de livraison</div>


                            <label>
                                {{$order->shipping_firstname}} {{$order->shipping_lastname}}
                                {{$order->shipping_address1}}@if($order->shipping_address2),
                                {{$order->shipping_address2}}
                                @endif
                                {{$order->shipping_city}}, {{$order->shipping_postalCode}}
                            </label>

                            </ul>
                        </div>
                    </div>
                    <div class="row mb-4 border-b-2">
                        <div>
                            <div class="font-bold">Adresse de Facturation</div>


                            <label>
                                {{$order->billing_firstname}} {{$order->billing_lastname}}
                                {{$order->billing_address1}} @if($order->billing_address2) ,
                                {{$order->billing_address2}}
                                @endif
                                {{$order->billing_city}}, {{$order->postalCode}}
                            </label>

                        </div>

                    </div>
                    @if($intent)
                        <div class="row mb-2 text-center mt-10">
                            <label for="cardholder-name">Propriétaire de la carte</label>
                            <input id="cardholder-name" type="text" class="fc-input">
                            <form id="setup-form" class="col-12  lg:col-10 lg:offset-1">

                                <div id="card-element" class="bg-white p-5 shadow-2xl"><!--Stripe.js injects the Card Element--></div>

                                <button id="submit" class="btn-large btn--fc red-button mt-10">

                                    <div class="spinner hidden" id="spinner"></div>

                                    <span  id="button-text">Payer</span>

                                </button>

                                <p id="card-error" role="alert"></p>

                                <p class="result-message hidden">

                                    Paiement réussi

                                    <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.

                                </p>

                            </form>
                        </div>
                    @else

                        <div class="row mb-2 text-center text-fcgrey-midLight text-xl font-bold">
                            <div class="col">
                            Commande {{__('randoloc.order.status_'. $order->status)}}
                            </div>
                        </div>


                    @endif

                </div>
            </div>
        </div>
    </div>

@stop
@if($intent)
@section('extra-js')
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        // A reference to Stripe.js initialized with your real test publishable API key.

        var stripe = Stripe("{{$stripePK}}");

        // The items the customer wants to buy


        // Disable the button until we have Stripe set up on the page


        // Calls stripe.confirmCardPayment

        // If the card requires authentication Stripe shows a pop-up modal to

        // prompt the user to enter authentication details without leaving your page.

        var payWithCard = function (stripe, card, clientSecret) {

            loading(true);

            stripe

                .confirmCardPayment(clientSecret, {

                    payment_method: {

                        card: card

                    }

                })

                .then(function (result) {

                    if (result.error) {

                        // Show error to your customer

                        showError(result.error.message);

                    } else {

                        // The payment succeeded!

                        orderComplete(result.paymentIntent.id);

                    }

                });

        };

        /* ------- UI helpers ------- */

        // Shows a success message when the payment is complete

        var orderComplete = function (paymentIntentId) {

            loading(false);



            document.querySelector(".result-message").classList.remove("hidden");

            document.querySelector("button").disabled = true;
            setTimeout(function (){
                window.location.reload();
            }, 2000)

        };

        // Show the customer the error from Stripe if their card fails to charge

        var showError = function (errorMsgText) {

            loading(false);

            var errorMsg = document.querySelector("#card-error");

            errorMsg.textContent = errorMsgText;

            setTimeout(function () {

                errorMsg.textContent = "";

            }, 4000);

        };

        // Show a spinner on payment submission

        var loading = function (isLoading) {

            if (isLoading) {

                // Disable the button and show a spinner

                document.querySelector("button").disabled = true;

                document.querySelector("#spinner").classList.remove("hidden");

                document.querySelector("#button-text").classList.add("hidden");

            } else {

                document.querySelector("button").disabled = false;

                document.querySelector("#spinner").classList.add("hidden");

                document.querySelector("#button-text").classList.remove("hidden");

            }

        };


        document.querySelector("button").disabled = true;


        var elements = stripe.elements();

        var style = {

            base: {

                color: "#32325d",
                iconColor: "#BA5851",
                fontFamily: 'Arial, sans-serif',

                fontSmoothing: "antialiased",

                fontSize: "16px",

                "::placeholder": {

                    color: "#32325d"

                }

            },

            invalid: {

                fontFamily: 'Arial, sans-serif',

                color: "#fa755a",

                iconColor: "#fa755a"

            }

        };

        var card = elements.create("card", {style: style, hidePostalCode: true});

        // Stripe injects an iframe into the DOM

        card.mount("#card-element");

        card.on("change", function (event) {

            // Disable the Pay button if there are no card details in the Element

            document.querySelector("button").disabled = event.empty;

            document.querySelector("#card-error").textContent = event.error ? event.error.message : "";

        });

        var setupForm = document.getElementById("setup-form");
        var cardholderName = document.getElementById('cardholder-name');
        var clientSecret = "{{$intent->client_secret}}";
        setupForm.addEventListener('submit', function(ev) {
            ev.preventDefault();
            stripe.confirmCardSetup(
                clientSecret,
                {
                    payment_method: {
                        card: card,
                        billing_details: {
                            name: cardholderName.value,
                        },
                    },
                }
            ).then(function(result) {
                if (result.error) {
                    showError(result.error)
                    // Display error.message in your UI.
                } else {
                    console.log(result);
                    orderComplete(result.setupIntent.id);
                    // The setup has succeeded. Display a success message.
                }
            });
        });

    </script>
@endsection
@endif