@extends('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">
        {{ __('Registrierung abschließen') }}
    </h4>

    <div id="smartwizard-3" class="smartwizard-register">
        <ul class="card px-4 pt-3 mb-3">
            <li>
                <a href="#smartwizard-3-step-1" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">1</span>
                    Datenschutz
                    <div class="text-muted small">zustimmen</div>

                </a>
            </li>
            <li>
                <a href="#smartwizard-3-step-2" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">2</span>
                    Passwort
                    <div class="text-muted small">vergeben</div>

                </a>
            </li>
            <li>
                <a href="#smartwizard-3-step-3" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">3</span>
                    Daten
                    <div class="text-muted small">anpassen</div>


                </a>
            </li>
            <li>
                <a href="#smartwizard-3-step-4" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">4</span>
                    Paket
                    <div class="text-muted small">auswählen</div>


                </a>
            </li>
            <li>
                <a href="#smartwizard-3-step-5" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">5</span>
                    Registrierung
                    <div class="text-muted small">abgeschlossen</div>
                </a>
            </li>
        </ul>

        <div class="mb-3">
            <div id="smartwizard-3-step-1" class="card animated fadeIn">
                <div class="card-body">
                        {!! Form::open(['url' => route('wizard_store', [0]), 'class' => 'form-horizontal', 'id'=>'lead-form-validation-confirm']) !!}
                            @include('user.data_confirm')
                        <div class="text-left mt-3">
                            <button type="submit" class="btn btn-secondary">{{ __('zustimmen und weiter') }}</button>&nbsp;
                        </div>
                        {!! Form::close() !!}
                </div>
            </div>
            <div id="smartwizard-3-step-2" class="card animated fadeIn">
                <div class="card-body">
                    @if(!$user->isPasswort())
                        {!! Form::open(['url' => route('wizard_store', [1])]) !!}
                            @include('user.update_password_first_form')
                        <div class="text-left mt-3">
                            <button type="submit" class="btn btn-secondary">{{ __('erstellen und weiter') }}</button>&nbsp;
                        </div>
                        {!! Form::close() !!}
                    @else
                        {!! Form::open(['url' => route('wizard_store', [1])]) !!}
                            <p>Passwort wurde bereits erstellt.</p>
                            <button type="submit" class="btn btn-secondary">{{ __('weiter') }}</button>&nbsp;
                        {!! Form::close() !!}
                    @endif
                </div>
            </div>
            <div id="smartwizard-3-step-3" class="card animated fadeIn">
                <div class="card-body">
                    {!! Form::open(['url' => route('wizard_store', [2]), 'class' => 'form-horizontal', 'id'=>'lead-form-validation']) !!}
                    @include('user.user_form')
                    <div class="text-left mt-3">
                        <button type="submit" class="btn btn-secondary">{{ __('speichern und weiter') }}</button>&nbsp;
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
            <div id="smartwizard-3-step-4" class="card animated fadeIn">
                <div class="card-body">
                    {!! Form::open(['url' => route('wizard_store', [3]), 'class' => 'form-horizontal']) !!}
                    <div class="table-responsive">
                        <table class="table table- m-0">
                            <tbody>
                            <div 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" 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
                            </div>
                            </tbody>
                        </table>
                    </div>
                    <div class="text-left mt-3">
                        <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> Sie werden auf unseren checkout Server weitergeletet, die Verbindung ist mit SSL verschlüsselt.</em>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
            <div id="smartwizard-3-step-5" class="card animated fadeIn">
                <div class="card-body">
                    <h4>Vielen Dank,</h4>
                    <p>Deine Registrierung ist abgeschlossen!</p>
                    <p>Sobald die Zahlung bei uns eingegangen ist, erhälst du automatisch eine E-Mail und dein Account wird freigeschaltet.</p>
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="{{ mix('/vendor/libs/smartwizard/smartwizard.css') }}">
    <script src="{{ mix('/vendor/libs/smartwizard/smartwizard.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('.smartwizard-register').smartWizard({
                autoAdjustHeight: true,
                backButtonSupport: true,
                useURLhash: false,
                showStepURLhash: false,
                selected: '{{$step}}',
                toolbarSettings: {
                    showNextButton: false,
                    showPreviousButton: false,
                }
            });
        });
    </script>

@endsection