mivita/resources/views/user/wizard/_payment.blade.php

<div class="row">
    <div class="col-md-3 mb-3">
        <div class="text-muted small">{{ __('payment.ordering_country') }}</div>
        {{ App\Services\UserService::getOrderInfo('billing_state') }}
    </div>
    <div class="col-md-3 mb-3">
        <div class="text-muted small">{{ __('payment.country_of_delivery') }}</div>
        {{ App\Services\UserService::getOrderInfo('shipping_state') }}
    </div>
    <div class="col-md-3 mb-3">
        <div class="text-muted small">{{ __('payment.VAT') }}</div>
        {{ App\Services\UserService::getOrderInfo('tax_free') }}
    </div>
    <div class="col-md-3 mb-3">
        <div class="text-muted small">{{ __('payment.reverse_charge_procedure') }}n</div>
        {{ App\Services\UserService::getOrderInfo('user_reverse_charge') }}
    </div>
</div>
{!! Form::open([
    'action' => route('wizard_store_payment', [20]),
    'class' => 'form-horizontal',
    'id' => 'wizard-payment-form',
]) !!}

<div class="alert alert-info mb-3">
    <i class="fa fa-info-circle mr-1"></i>
    {!! __('register.wizard_package_info') !!}
</div>
<style>
    .switcher-indicator.error-box-shadow,
    .error-box-shadow {
        box-shadow: 0 0 1px 1px #aa4343;
    }

    .switcher-indicator {
        box-shadow: 0 0 1px 1px #a3a3a3;
    }
</style>
<div class="table-responsive" id="membership_package_payment_container" style="border-radius: 10px;">
    <table class="table table- m-0" id="membership_package_payment">
        <tbody class="switchers-stacked">
            @php($counter = 1)
            @foreach ($products as $product)
                <tr>
                    <td class="text-center align-middle px-0">
                        <label class="switcher switcher-secondary">
                            <input type="radio" class="switcher-input"
                                data-price="{{ $product->getPriceWith(\App\Services\UserService::getTaxFree(), false, \App\Services\UserService::$user_country) }}"
                                data-is-membership-only="{{ $product->is_membership_only ? '1' : '0' }}"
                                value="{{ $product->id }}" name="switchers-package-wizard">
                            <span class="switcher-indicator" style="margin-left: 5px;">
                                <span class="switcher-yes"></span>
                                <span class="switcher-no"></span>
                            </span>
                            <span class="switcher-label"></span>
                        </label>
                    </td>
                    <td class="p-4">
                        <div class="media align-items-center">
                            @if (count($product->images))
                                <img src="{{ route('product_image', [$product->images->first()->slug]) }}"
                                    class="d-block ui-w-60 ui-bordered mr-4" alt="">
                            @endif
                            <div class="media-body">
                                <h5 class="d-block text-dark">{{ $product->getLang('name') }}</h5>
                                {!! $product->getLang('copy') !!}
                            </div>
                        </div>
                    </td>
                    <td class="text-right font-weight-semibold align-middle p-4">
                        <span
                            class="no-line-break">{{ $product->getFormattedPriceWith(\App\Services\UserService::getTaxFree(), false, \App\Services\UserService::$user_country) }}
                            &euro;</span>
                        @if (\App\Services\UserService::$user_country && \App\Services\UserService::$user_country->currency)
                            <span class="no-line-break">{!! $product->getFormattedPriceCurrencyWith(
                                \App\Services\UserService::getTaxFree(),
                                false,
                                \App\Services\UserService::$user_country,
                            ) !!}</span>
                        @endif
                    </td>
                </tr>
                @php($counter++)
            @endforeach
        </tbody>
    </table>
</div>

<div class="alert alert-danger mt-2 d-none" id="wizard-selection-error">
    <i class="fa fa-exclamation-circle mr-1"></i>
    {{ __('register.wizard_no_selection') }}
</div>

<div class="text-left mt-3">
    <hr>
    <div class="float-right">

        <strong>{{ __('order.total_sum') }} @if (\App\Services\UserService::getTaxFree())
                {{ __('order.net') }}
            @else
                {{ __('order.gross') }}
            @endif: <span id="card_total_price">0</span> &euro;</strong>
    </div>
    <button type="button" id="btn-wizard-submit"
        class="btn btn-secondary">{{ __('payment.select_and_proceed_to_checkout') }}</button>&nbsp;
    <br><br>
    <em class="small text-center"> <i class="fa fa-lock"></i> {{ __('payment.checkout_ssl_server') }}</em>
</div>
{!! Form::close() !!}

{{-- Modal: Warnung bei reiner Mitgliedschaft ohne Starterpaket --}}
<div class="modal fade" id="starterWarningModal" tabindex="-1" role="dialog"
    aria-labelledby="starterWarningModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content border-warning">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="starterWarningModalLabel"><i
                        class="fa fa-exclamation-triangle mr-2"></i>{{ __('register.starter_warning_title') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-0">
                    <i class="fa fa-info-circle mr-1"></i>
                    {!! __('register.starter_warning_text') !!}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning"
                    data-dismiss="modal">{{ __('register.starter_warning_back') }}</button>
                <button type="button" class="btn btn-outline-secondary"
                    id="btn-confirm-membership-only">{{ __('register.starter_warning_confirm') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        function calculate_package_payment() {
            var price_total = 0;
            $('#membership_package_payment .switcher-input').each(function() {
                if ($(this).prop('checked')) {
                    price_total += parseFloat($(this).data('price'));
                }
            });
            $('#card_total_price').text(price_total.toFixed(2).toString().replace(".", ","));
        }
        $('#membership_package_payment .switcher-input').on('change', function() {
            calculate_package_payment();
            $('#wizard-selection-error').addClass('d-none');
            $('#membership_package_payment_container').removeClass('error-box-shadow');
            $('.switcher-indicator').removeClass('error-box-shadow');
        });
        calculate_package_payment();

        // Submit mit Warn-Modal bei reiner Mitgliedschaft
        $('#btn-wizard-submit').on('click', function() {
            var selected = $('input[name="switchers-package-wizard"]:checked');
            if (!selected.length) {
                $('#wizard-selection-error').removeClass('d-none');
                $('.switcher-indicator').addClass('error-box-shadow');
                $('#membership_package_payment_container').addClass('error-box-shadow');
                $('html, body').animate({
                    scrollTop: $('#membership_package_payment').offset().top - 100
                }, 300);
                return;
            }
            if (selected.data('is-membership-only') == '1') {
                $('#starterWarningModal').modal('show');
            } else {
                $('#wizard-payment-form').submit();
            }
        });

        $('#btn-confirm-membership-only').on('click', function() {
            $('#starterWarningModal').modal('hide');
            $('#wizard-payment-form').submit();
        });
    });
</script>