@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>
                    Vertrag
                    <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>
                    Daten
                    <div class="text-muted small">anpassen</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>
                    Ausweis
                    <div class="text-muted small">hochladen</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>
                    Gewerbeschein
                    <div class="text-muted small">hochladen</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">abschließen</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_register', [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">
                    {!! Form::open(['url' => route('wizard_store_register', [1]), '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-3" class="card animated fadeIn">
                <div class="card-body">
                    <div class="card mb-4">
                        <h5 class="card-header">
                            {{ trans('register.wizard_verification_hl') }}
                        </h5>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mt-4">
                                        {!! Form::open([ 'url' => route('wizard_store_register', [2]), 'method' => 'post', 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'idcardDropzone' ]) !!}
                                        <div class="fallback">
                                            <input name="file" type="file" multiple>
                                        </div>
                                        {!! Form::close() !!}
                                        <br>
                                        <div class="alert alert-danger alert-dismissable" style="display:none;"></div>
                                        <p>{{ trans('register.wizard_verification_line_1') }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    @if($user->files->count())
                                        <div class="row">
                                        @foreach($user->files()->whereIdentifier('id_card')->get() as $file)
                                            <div class="col-md-12 col-xl-6">
                                                <div class="card mb-3">
                                                    <div class="card-body">
                                                        <h6 class="card-title"><a target="_blank" href="{{ route('storage_file', [$file->id, 'user']) }}">{{ $file->original_name }}</a></h6>
                                                        <p class="card-text">{{ $file->formatBytes() }}
                                                            <a href="{{ route('wizard_delete_file', [$file->id, 'upload']) }}" class="btn btn-sm btn-default float-right" onclick="return confirm('Datei wirklich löschen?');">
                                                                <span class="ion ion-md-trash text-danger"></span>
                                                            </a>
                                                        </p>
                                                    </div>
                                                    @if(strtolower($file->ext ) == 'pdf')
                                                        <object data="{{ route('storage_file', [$file->id, 'user']) }}" type="application/pdf" class="card-img-bottom"></object>
                                                    @else
                                                        <img src="{{ route('storage_file', [$file->id, 'user']) }}" alt="" class="card-img-bottom">
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-left mt-3">
                        {!! Form::open(['url' => route('wizard_store_register', [2])]) !!}
                            <button type="submit" name="submit" value="do" class="btn btn-secondary">{{ __('speichern und weiter') }}</button>&nbsp;
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <div id="smartwizard-3-step-4" class="card animated fadeIn">
                <div class="card-body">
                    <div class="card mb-4">
                        <h5 class="card-header">
                            {{ trans('register.wizard_business_license_hl') }}
                        </h5>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mt-4">
                                        {!! Form::open([ 'url' => route('wizard_store_register', [3]), 'method' => 'post', 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'businesslDropzone' ]) !!}
                                        <div class="fallback">
                                            <input name="file" type="file" multiple>
                                        </div>
                                        {!! Form::close() !!}
                                        <br>
                                        <div class="alert alert-danger alert-dismissable" style="display:none;"></div>
                                        <p>{{ trans('register.wizard_business_license_line_1') }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    @if($user->files->count())
                                        <div class="row">
                                            @foreach($user->files()->whereIdentifier('business_license')->get() as $file)
                                                <div class="col-md-12 col-xl-6">
                                                    <div class="card mb-3">
                                                        <div class="card-body">
                                                            <h6 class="card-title"><a target="_blank" href="{{ route('storage_file', [$file->id, 'user']) }}">{{ $file->original_name }}</a></h6>
                                                            <p class="card-text">{{ $file->formatBytes() }}
                                                                <a href="{{ route('wizard_delete_file', [$file->id, 'upload']) }}" class="btn btn-sm btn-default float-right" onclick="return confirm('Datei wirklich löschen?');">
                                                                    <span class="ion ion-md-trash text-danger"></span>
                                                                </a>
                                                            </p>
                                                        </div>
                                                        @if(strtolower($file->ext ) == 'pdf')
                                                            <object data="{{ route('storage_file', [$file->id, 'user']) }}" type="application/pdf" class="card-img-bottom"></object>
                                                        @else
                                                            <img src="{{ route('storage_file', [$file->id, 'user']) }}" alt="" class="card-img-bottom">
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-left mt-3">
                        {!! Form::open(['url' => route('wizard_store_register', [3])]) !!}
                        <button type="submit" name="submit" value="do" class="btn btn-secondary">{{ __('speichern und weiter') }}</button>&nbsp;
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
            <div id="smartwizard-3-step-5" class="card animated fadeIn">
                <div class="card-body">
                    <h4>{{ trans('register.wizard_finish_hl') }}</h4>
                    <p>{{ trans('register.wizard_finish_line_1') }}.</p>
                    {!! Form::open(['url' => route('wizard_store_register', [4])]) !!}
                        <button type="submit" name="submit" value="do" class="btn btn-secondary">{{ __('Registrierung abschließen') }}</button>&nbsp;
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <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,
                }
            });
        });

        var real_dropzone = {
            uploadMultiple: false,
            parallelUploads: 1,
            maxFilesize: 32,
            addRemoveLinks: true,
            dictDefaultMessage: 'Hier klicken, oder Datei hier reinziehen (Drag&Drop)',
            dictFallbackMessage: 'Ihr Browser unterstützt Drag&Drop Dateiuploads nicht',
            dictFallbackText: 'Benutzen Sie das Formular um Ihre Dateien hochzuladen',
            dictFileTooBig: "Die Datei ist zu groß. Die maximale Dateigröße beträgt 32 MB",
            dictInvalidFileType: 'Eine Datei dieses Typs kann nicht hochgeladen werden',
            dictResponseError: "Der Server hat ihre Anfrage mit Status error abgelehnt",
            dictCancelUpload: 'Hochladen abbrechen',
            dictCancelUploadConfirmation: null,
            dictRemoveFile: 'Datei entfernen',
            dictMaxFilesExceeded: 'Sie können keine weiteren Dateien mehr hochladen',
            acceptedFiles: "image/jpeg,image/pjpeg,image/png,image/gif,application/pdf,text/plain",
            // The setting up of the dropzone
            init:function() {
                this.on("removedfile", function(file) {
                    var _ele = $('.alert-danger');
                    _ele.fadeOut();

                } );

                this.on("addedfile", function (file) {
                    var _ele = $('.alert-danger');
                    _ele.fadeOut();
                });

            },
            error: function(file, response) {
                var message
                if($.type(response) === "string")
                    message = response; //dropzone sends it's own error messages in string
                else
                    message = response.message;
                var _ele = $('.alert-danger');
                _ele.fadeIn();
                _ele.text(message);


            },
            success: function(file,response) {
                console.log(file);
                console.log(response.filename);
                console.log(response.filedata);
                console.log(response);

                if(response.redirect){
                    window.location.href = response.redirect;
                }else{
                    if(response.error === false){
                        //true
                        window.location.href = window.location.href;
                    }
                }
            }

        };

        Dropzone.options.idcardDropzone = real_dropzone;
        Dropzone.options.businesslDropzone = real_dropzone;


    </script>
@endsection