@extends('layouts.master')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="container" align="center" style="width: 50%;">
                <div class="card">
                    <div class="card-body">
                        <section class="">
                            <div class="bg_area_1">
                                <div class="container">
                                    <div class="row">
                                        <div class="form-box-size login-form-3 box-shadow">
                                            <div class="login-form-title-3">
                                                <h2 style="color:white;" class="pt-2 pb-2 bg-primary">
                                                    PAYMENT
                                                    INFO</h2>
                                            </div>
                                            <div class="login-form-box-3">
                                                <div class="form-wrapper">
                                                    <p style="font-size: 16px;">All payments
                                                        are managed
                                                        securely by Stripe.</p>
                                                    <img src="{{ asset('images/logo-stripe.webp') }}"
                                                        height="" class="mb-4" width="350px" alt="">
                                                    <form action="{{ route('ifta.calculate_miles.storePlan') }}" method="POST"
                                                        id="payment-form">
                                                        @csrf
                                                        <div class="form-group">
                                                            <i class="fa fa-user" aria-hidden="true"></i>
                                                            <label class="form-label" for="name"
                                                                style="font-size: 16px;">Contact Name : </label>
                                                            <label class="form-input" for="Recuruiting_contact"
                                                                style="box-shadow:none">{{ getAuthCarrierInfo()->CONTACT_NAME }}</label>
                                                            <input name="Recuruiting_contact" id="Recuruiting_contact"
                                                                class="form-input" type="hidden"
                                                                value="{{ getAuthCarrierInfo()->CONTACT_NAME }}" required />
                                                            <input name="holdername" id="name" class="form-input"
                                                                type="hidden" value="{{ getAuthCarrierInfo()->CONTACT_NAME }}"
                                                                required />
                                                        </div>

                                                        <div class="form-group">
                                                            <input name="email" id="email" class="form-input"
                                                                type="hidden" value="{{ getAuthCarrierInfo()->EMAIL }}" required />
                                                        </div>

                                                        <div class="form-group">
                                                            <input name="phone" id="phone" class="form-input"
                                                                type="hidden" value="{{ getAuthCarrierInfo()->PHONE }}"
                                                                required />
                                                            <input name="amt" id="amt" type="hidden"
                                                                value="9.95" />
                                                            <input name="plantype" id="plantype" type="hidden"
                                                                value="Standard">
                                                        </div>

                                                        <div class="form-group mt-10">
                                                            <div class="stripe-payment-data">
                                                                <fieldset id="strcs-cc-form" class="fieldsetcls"
                                                                    style="background:transparent;">
                                                                </fieldset>
                                                                <div id="card-element" class="MyCardElement">

                                                                </div>
                                                                <div id="card-errors" role="alert"
                                                                    class="mt-3 text-danger">

                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="payment-errors">

                                                            </div>
                                                        </div>
                                                        <div class="mt-10 mb-3">
                                                            <button class="bg-primary"
                                                                style="color: white; padding: 10px 20px; border: none; border-radius: 50px; cursor: pointer; font-size: 16px;">
                                                                Pay Now <i class="fa fa-arrow-right text-white"></i> $ 9.95 /
                                                                Quarter
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @php
        $stripePublic =
            !empty($_SERVER['HTTP_HOST']) && $_SERVER['HTTP_HOST'] == 'fuel.tmdashboard.com'
                ? config('custom_key')['LIVE_STRIPE_PUBLIC']
                : config('custom_key')['STRIPE_PUBLIC'];
    @endphp
@endsection()
@section('script')
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        var stripe_key = "{{ $stripePublic }}";
        var stripe = Stripe(stripe_key);
        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 cardElement = elements.create("card", {
            style: style
        });
        cardElement.mount("#card-element");

        cardElement.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                document.getElementsByClassName('loading')[0].style.display = 'none';

                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';

            }
        });
        $(function() {
            var $form = $('#payment-form');
            $form.submit(function(event) {
                stripe.createToken(cardElement).then(function(result) {
                    if (result.error) {
                        var errorElement = document.getElementById('card-errors');
                        errorElement.textContent = result.error.message;
                        alert(result.error.message);
                        return false;
                    } else {
                        stripeTokenHandler(result.token);
                    }
                });
                return false;
            });
        });

        function stripeTokenHandler(token) {
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);
            form.submit();
        }

        function stripeResponseHandler(status, response) {
            var $form = $('#payment-form');
            if (response.error) {
                $form.find('.payment-errors').text(response.error.message);
                $form.find('.submit').prop('disabled', false);
            } else {
                var token = response.id;
                $form.append($('<input type="hidden" name="stripeToken">').val(token));
                $form.get(0).submit();
            }
        };
    </script>
@endsection()