@extends('portal.layouts.layout-2')

@section('content')

@if ($errors->any())
<div class="row">
    <div class="col-sm-12">
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endif

<h4 class="font-weight-bold py-2 mb-2">
{{__('abo.create_abo')}}
</h4>

<style>
    .smartwizard-abo .nav-link {
        pointer-events: none;
        opacity: 0.7;
    }
    .smartwizard-abo .nav-link.active {
        pointer-events: auto;
        opacity: 1;
    }
</style>

<div id="smartwizard" class="smartwizard-abo">
<ul class="card px-4 pt-3 mb-3">
    <li>
        <a href="#smartwizard-step-0" class="mb-3">
            <span class="sw-done-icon ion ion-md-checkmark"></span>
            <span class="sw-number">1</span>
            {{__('abo.abo')}}
            <div class="text-muted small">{{__('abo.info')}}</div>

        </a>
    </li>
    <li>
        <a href="#smartwizard-step-1" class="mb-3">
            <span class="sw-done-icon ion ion-md-checkmark"></span>
            <span class="sw-number">2</span>
            {{__('abo.data')}}
            <div class="text-muted small">{{__('abo.check')}}</div>

        </a>
    </li>
    <li>
        <a href="#smartwizard-step-2" class="mb-3">
            <span class="sw-done-icon ion ion-md-checkmark"></span>
            <span class="sw-number">3</span>
            {{__('abo.basis_product')}}
            <div class="text-muted small">{{__('abo.choose')}}</div>
        </a>
    </li>
    <li>
        <a href="#smartwizard-step-3" class="mb-3">
            <span class="sw-done-icon ion ion-md-checkmark"></span>
            <span class="sw-number">4</span>
            {{__('abo.upgrade_products')}}
            <div class="text-muted small">{{__('abo.choose')}}</div>

        </a>
    </li>
    <li>
        <a href="#smartwizard-step-4" class="mb-3">
            <span class="sw-done-icon ion ion-md-checkmark"></span>
            <span class="sw-number">5</span>
            {{__('abo.check')}}
            <div class="text-muted small">{{__('abo.order')}}</div>

        </a>
    </li>
</ul>

<div class="mb-3">
        <div id="smartwizard-step-0" class="card animated fadeIn">
            @include('portal.abo._create_info')
        </div>
        @if(!isset($no_shopping_user))
        <div id="smartwizard-step-1" class="card animated fadeIn">
            @include('portal.abo._create_data')
        </div>

        <div id="smartwizard-step-2" class="card animated fadeIn">
            @include('portal.abo._create_basis_product')
        </div>

        <div id="smartwizard-step-3" class="card animated fadeIn">
            @include('portal.abo._create_upgrade_products')
        </div>
        <div id="smartwizard-step-4" class="card animated fadeIn">
            @include('portal.abo._create_check')
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
    <link rel="stylesheet" href="{{ asset('/vendor/libs/smartwizard/smartwizard.css') }}">
    <script src="{{ asset('/vendor/libs/smartwizard/smartwizard.js') }}"></script>
    <script src="{{ asset('js/product-quantity.js') }}?v={{ get_file_last_time('/js/product-quantity.js') }}"></script>
    
    <script>
        $( document ).ready(function() {
            $('.smartwizard-abo').smartWizard({
                autoAdjustHeight: true,
                backButtonSupport: true,
                useURLhash: false,
                showStepURLhash: false,
                selected: '{{$step}}',
                toolbarSettings: {
                    showNextButton: false,
                    showPreviousButton: false,
                },
                /*events: {
                    leaveStep: function(e, anchorObject, stepNumber, stepDirection) {
                        // Formular im aktuellen Schritt finden
                        const $currentForm = $(e.target).find('.tab-pane.active form');
                        if ($currentForm.length) {
                            // Temporäres Formular erstellen und absenden
                            const $tempForm = $('<form>', {
                                'method': 'POST',
                                'action': $currentForm.attr('action'),
                                'style': 'display: none;'
                            });

                            // Alle Input-Felder kopieren
                            $currentForm.find('input').each((_, input) => {
                                const $input = $(input);
                                if ($input.attr('type') === 'text') {
                                    const value = parseInt($input.val()) || 0;
                                    if (value > 0) {
                                        $tempForm.append($('<input>', {
                                            'type': 'hidden',
                                            'name': $input.attr('name'),
                                            'value': value
                                        }));
                                    }
                                }
                            });

                            // CSRF-Token hinzufügen
                            $tempForm.append($('<input>', {
                                'type': 'hidden',
                                'name': '_token',
                                'value': $('meta[name="csrf-token"]').attr('content')
                            }));

                            // Action-Button-Wert hinzufügen
                            $tempForm.append($('<input>', {
                                'type': 'hidden',
                                'name': 'action',
                                'value': 'next'
                            }));

                            // Formular zum Body hinzufügen und absenden
                            $('body').append($tempForm);
                            $tempForm.submit();
                            return false; // Verhindert den normalen Schrittwechsel
                        }
                    }
                }*/
            });
        });
    </script>
@endsection