@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">
        {{ __('register.complete_registration') }}
    </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>
                    {{ __('register.package') }}
                    <div class="text-muted small">{{ __('register.select') }}</div>
                </a>
            </li>
        </ul>

        <div class="mb-3">
            <div id="smartwizard-3-step-1" class="card animated fadeIn">
                <div class="card-body">
                    @if ($userHistoryWizardPayment && $userHistoryWizardPayment->status > 2)
                        <h6 class="alert badge-{{ $userHistoryWizardPayment->getStatusColor() }}">
                            {{ __('membership.payment_has_been_made') }} {{ __('membership.status') }}
                            {{ trans('payment.status.' . $userHistoryWizardPayment->getStatusType()) }}</h6>
                        <h5 class="card-header bg-light">
                            <a href="#" class="" data-toggle="collapse" data-target="#collapsePaymentForm"
                                aria-expanded="false" aria-controls="collapsePaymentForm">
                                <i class="fa fa-caret-expand"></i> {{ __('register.open_payment_options') }}
                            </a>
                        </h5>
                        <div class="collapse" id="collapsePaymentForm">
                            @include('user.wizard._payment')
                        </div>
                    @else
                        @include('user.wizard._payment')
                    @endif
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="{{ asset('/vendor/libs/smartwizard/smartwizard.css') }}">
    <script src="{{ asset('/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