{!! Form::open(['url' => route('wizard_store_payment', [20]), 'class' => 'form-horizontal']) !!}
    <div class="table-responsive">
        <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->price}}" value="{{$product->id}}" name="switchers-package-wizard" @if($counter == 2) checked @endif >
                            <span class="switcher-indicator">
                              <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->name}}</h5>
                                {!!  $product->getLang('copy') !!}
                            </div>
                        </div>
                    </td>
                    <td class="text-right font-weight-semibold align-middle p-4">{{$product->getFormattedPrice()}} EUR / p.a.</td>
                </tr>
                @php($counter++)
            @endforeach
            </tbody>
        </table>
    </div>

    @if($products_on_board)
    <div class="table-responsive">
        <table class="table table- m-0" id="membership_onboarding_package">
            <tbody class="">
            @foreach($products_on_board as $product)
                <tr>
                    <td class="text-center align-middle px-0">
                        <label class="switcher switcher-square switcher-secondary">
                            <input type="checkbox" class="switcher-input" data-price="{{$product->price}}" name="products_on_board[]" value="{{$product->id}}">
                            <span class="switcher-indicator">
                                <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->name}}</h5>
                                {!!  $product->getLang('copy') !!}
                            </div>
                        </div>
                    </td>
                    <td class="text-right font-weight-semibold align-middle p-4">{{$product->getFormattedPrice()}} EUR / p.a.</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @endif
    <div class="text-left mt-3">
        <hr>
        <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="abo_options">
            <span class="custom-control-label secondary"><strong>{{__('payment.status.auto_renewal_hl')}}:</strong> {{__('payment.status.auto_renewal_line_1')}}</span>
            <p class="text-muted">{{__('payment.status.auto_renewal_line_2')}}</p>
        </label>
        <hr>
        <div class="float-right">
            <strong>Gesamtsumme: <span id="card_total_price">0</span> €</strong>
        </div>
        <button type="submit" class="btn btn-secondary">{{ __('wählen und weiter zur Kasse') }}</button>&nbsp;
        <br><br>
        <em class="small text-center"> <i class="fa fa-lock"></i> Du wirst auf unseren checkout Server weitergeletet, die Verbindung ist SSL verschlüsselt.</em>
    </div>
    {!! Form::close() !!}

    <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'));
                    }
                });
                $('#membership_onboarding_package .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();
            });
            $('#membership_onboarding_package .switcher-input').on('change', function () {
                calculate_package_payment();
            });
            calculate_package_payment();
        });
    </script>