@extends($layoutPrefix . 'Layout.master')
@inject('hookServices','App\Blueprint\Services\hookServices')
@section('title',$title)
@section('content')
    @inject('htmlHelper', 'App\Blueprint\Services\HtmlServices')
    @php
        $htmlHelper->wrapperClass = 'form-group';
        $htmlHelper->labelClass = 'control-label col-md-3 col-sm-4';
        $htmlHelper->fieldClass = 'col-md-4 col-sm-5';
        $customFieldOptions = [
            'defaultValueMethod' => 'post',
            'text' => [
                'class' => 'form-control',
            ]
        ]
    @endphp
        <!-- BEGIN PAGE HEADER-->
    <!-- END PAGE HEADER-->
    <div class="row registrationWrapper">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="postRegistrationBox" style="display: none">
                <span class="fa fa-check check"></span>
                <h3>{{_t('quickSignup.you_are_registered')}} !!!</h3>
                <div class="registeredFooter">
                    <a href="{{ scopeRoute('quickSignUp') }}">
                        <button class="btn btn-outline green" type="button">
                            <i class="fa fa-angle-left"></i>{{_t('register.back')}}
                        </button>
                    </a>
                </div>
                <div class="invoiceHolder" data-invoice=""></div>
            </div>
            @if($registrationAllowed)
                <div class="portlet light bordered" id="registrationForm">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class=" icon-layers font-green"></i>
                            <span class="caption-subject font-green bold uppercase"> {{_t('register.registration_wizard')}}
                                <span class="step-title"> {{_t('quickSignup.step_1_3')}} </span>
                    </span>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form action="{{ route('admin.register') }}" method="post"
                              class="form-horizontal registrationForm quickSignup" id="registrationForm">
                            <div class="form-wizard">
                                <div class="form-body">
                                    <ul class="nav nav-pills nav-justified steps">
                                        <li>
                                            <a href="#tab1" data-toggle="tab" class="step">
                                                <span class="number"> 1 </span>
                                                <span class="desc">
                                    <i class="fa fa-check"></i> {{ _t('quickSignup.sponsor_info') }} </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#tab2" data-toggle="tab" class="step">
                                                <span class="number"> 2 </span>
                                                <span class="desc">
                                        <i class="fa fa-check"></i> {{ _t('quickSignup.email_verification') }} </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#tab3" data-toggle="tab" class="step">
                                                <span class="number"> 3 </span>
                                                <span class="desc">
                                    <i class="fa fa-check"></i> {{ _t('quickSignup.account_info') }} </span>
                                            </a>
                                        </li>
                                    </ul>
                                    <div id="bar" class="progress progress-striped" role="progressbar">
                                        <div class="progress-bar progress-bar-success"></div>
                                    </div>
                                    <div class="tab-content">
                                        <div class="alert alert-danger display-none">
                                            <button class="close"
                                                    data-dismiss="alert"></button> {{ _t('quickSignup.form_errors_check') }}
                                        </div>
                                        <div class="alert alert-success display-none">
                                            <button class="close" data-dismiss="alert"></button>
                                            {{_t('quickSignup.from_validation_success')}}!
                                        </div>
                                        <!-- Sponsor info tab start-->
                                        <div class="tab-pane" id="tab1">
                                            <h3 class="block">{{ _t('quickSignup.sponsor_info') }}</h3>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4 ">{{ _t('quickSignup.sponsor') }}
                                                    <span class="required" aria-required="true"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text"
                                                           @if($sponsorReadOnly == 'yes' && $sponsor) readonly
                                                           @endif value="{{ ($setDefaultSponsor == 'yes' && $sponsor) ?  $sponsor : null  }}"
                                                           data-action="verifySponsor"
                                                           class="form-control ajaxValidate" name="sponsor"
                                                           placeholder="{{ _t('quickSignup.enter_sponsor') }}">
                                                </div>
                                            </div>
                                            <input type="hidden" name="placement_status" id="placement"
                                                   value="{{ $placement }}">
                                            <div @if(!$placement) style="display: none" @endif>
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-3 col-sm-4">{{ _t('quickSignup.placement') }}
                                                        <span class="required" aria-required="true"> * </span>
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="text" value="{{ $placement }}"
                                                               class="form-control ajaxValidatePlacement"
                                                               name="placement"
                                                               id="placement"
                                                               data-action="verifyPlacement">
                                                    </div>
                                                </div>
                                            </div>
                                            {!! defineFilter('registerFormPlacementInfo', '<div style="display: none">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-4">'. _t('quickSignup.position') .'
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="text" value="'. $position .'"
                                                               class="form-control" name="position">
                                                    </div>
                                                </div>
                                            </div>', 'root', $position) !!}
                                        </div>
                                        <!-- Sponsor info tab end-->
                                        <!-- Personal info tab start-->
                                        <div class="tab-pane" id="tab2">
                                            <h3 class="block">{{ _t('quickSignup.email_verification') }}</h3>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('quickSignup.email') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control ajaxValidate"
                                                           data-action="verifyEmail" name="email" id="email"
                                                           placeholder="{{ _t('quickSignup.enter_email') }}"/>
                                                </div>
                                                <div class="col-md-5 col-sm-3">
                                                    <button type="button" data-style="contract"
                                                            class="btn blue sendOtp ladda-button">{{ _t('quickSignup.send_otp') }}
                                                    </button>
                                                </div>
                                                <div id="emailError"
                                                     style=" color:red; margin-left:300px; margin-top:40px;"></div>
                                            </div>
                                            <div class="form-group otpBlock" style="display: none">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('quickSignup.otp') }}
                                                    <span class="required"> * </span></label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="text" class="form-control" data-action="verifyOtp"
                                                           name="otp" id="verifyOtp" style="display: none"
                                                           placeholder="{{ _t('quickSignup.otp') }}"/>
                                                </div>
                                                <div class="col-md-4 col-sm-5">
                                                    <button type="button" id="btn_verify"
                                                            class="btn green verification ladda-button"
                                                            style="display: none">{{ _t('quickSignup.verify') }}
                                                    </button>
                                                    <button type="button" data-style="contract" style="display: none"
                                                            class="btn blue resendOtp ladda-button">{{ _t('quickSignup.resend_otp') }}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="errorWrapper" style="display: none"></div>

                                            <div class="otpTime" style="text-align: center; display: none">
                                                <h6>{{ _t('quickSignup.otp_expire') }} <span
                                                        id="count"> 180 </span> {{ _t('quickSignup.seconds') }}
                                                </h6></div>
                                            {!! $htmlHelper->renderFieldGroup('account_details', 'registration_form', $customFieldOptions, true) !!}
                                        </div>
                                        <!-- Personal info tab end-->
                                        <!-- Profile info tab start-->
                                        <div class="tab-pane" id="tab3">
                                            <h3 class="block">{{ _t('quickSignup.profile_setup') }}</h3>
                                            @if(getConfig('registration','username_type') == 'static')
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-3 col-sm-4">{{ _t('quickSignup.username') }}
                                                        <span class="required"> * </span>
                                                    </label>
                                                    <div class="col-md-4 col-sm-5">
                                                        <input type="text" class="form-control ajaxValidate"
                                                               data-action="verifyUsername" name="username"
                                                               placeholder="{{ _t('quickSignup.enter_username') }}"/>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('quickSignup.password') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="password" class="form-control" name="password"
                                                           id="submit_form_password"
                                                           placeholder="{{ _t('quickSignup.enter_password') }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-3 col-sm-4">{{ _t('quickSignup.confirm_password') }}
                                                    <span class="required"> * </span>
                                                </label>
                                                <div class="col-md-4 col-sm-5">
                                                    <input type="password" class="form-control" id="confirmPassword"
                                                           name="password_confirmation"
                                                           placeholder="{{ _t('quickSignup.enter_password_again') }}"/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-md-9 col-sm-5" style="text-align: center">
                                                    <button type="button" class="btn btn blue registration">
                                                        {{ _t('quickSignup.register') }}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="errorSection" style="color: red"></div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="col-offset-3 col-md-9">
                                                <a href="javascript:" class="btn default button-previous">
                                                    <i class="fa fa-angle-left"></i> {{ _t('register.back') }} </a>
                                                <a href="javascript:"
                                                   class="btn btn-outline green button-next"> {{ _t('register.continue') }}
                                                    <i class="fa fa-angle-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="context" value="registration">
                                <!-- </form> -->
                            </div>
                        </form>
                    </div>
                    @else
                        @include('Auth.Partials.registrationSuspended')
                    @endif
                </div>
        </div>
        <style>
            body {
                background: #364150 !important;
            }
        </style>
        <script type="text/javascript">
            $(function () {

                $("#email").keyup(function () {
                    $("#emailError").hide();
                });
                Ladda.bind('.ladda-button');
                if ($('div #tab2').hasClass('active')) {
                    $(".form-actions .button-next").hide();
                }
                $('.sendOtp').click(function () {
                    var email = $("#email").val()
                    $(".verification").show();
                    $.post("{{ scopeRoute('quickSigUp.emailVerification') }}", {
                        email: $("#email").val(),
                    }, function () {
                        $("#emailError").hide();
                        var counter = 180;
                        setInterval(function () {
                            counter--;
                            if (counter >= 0) {
                                span = document.getElementById("count");
                                span.innerHTML = counter;
                            }
                            if (counter === 0) {
                                $('.resendOtp').show();
                                clearInterval(counter);
                            }
                        }, 1000);
                        $("#verifyOtp").show();
                        $(".otpBlock").show();
                        $(".sendOtp").show();
                        $(".sendOtp").hide();
                        $(".otpTime").show();
                        Ladda.stopAll();
                    }).fail(function (response) {
                        $("#emailError").html(response.responseJSON.email[0]);
                        Ladda.stopAll();
                    });
                });

                $('.resendOtp').click(function () {
                    var email = $("#email").val()
                    $(".verification").show();
                    $.post("{{ scopeRoute('quickSigUp.emailVerification') }}", {
                        email: $("#email").val(),
                    }, function () {
                        var counter = 180;
                        setInterval(function () {
                            counter--;
                            if (counter >= 0) {
                                $('.resendOtp').hide();
                                span = document.getElementById("count");
                                span.innerHTML = counter;
                            }
                            if (counter === 0) {
                                $('.resendOtp').show();
                                clearInterval(counter);
                            }
                        }, 1000);

                        $("#verifyOtp").show();
                        $(".otpBlock").show();

                        Ladda.stopAll();
                        // fetchTopUp()
                    }).fail(function () {
                        Ladda.stopAll();
                    });
                });
                $('.verification').click(function () {
                    let errorWrapper = $('.errorWrapper').slideUp().empty();
                    $.post("{{ scopeRoute('quickSigUp.verify') }}", {
                        otp: $("#verifyOtp").val(),
                    }, function () {
                        $('.button-next').trigger('click');
                        Ladda.stopAll();
                    }).fail(function (response) {
                        Ladda.stopAll();
                        let errors = response.responseJSON.message;
                        errorWrapper.append('<div class="error">' + errors + '</div>');
                        errorWrapper.slideDown();
                        Ladda.stopAll();
                    });
                });
                $('.registration').click(function () {
                    let errorSection = $('.errorSection').slideUp().empty();
                    $.post('{{ scopeRoute('quickSigUp.register') }}', $('.registrationForm').serialize(), function () {
                        $("#registrationForm").hide();
                        $(".postRegistrationBox").show();
                        Ladda.stopAll();
                    }).fail(function (response) {
                        console.log(response.responseJSON);
                        Ladda.stopAll();
                        let errors = response.responseJSON;
                        for (let key in errors)
                            errorSection.append('<div class="error">' + errors[key] + '</div>');

                        errorSection.slideDown();
                    });
                });
                if ('{!! $placement !!}')
                    window.placementValidate = true;
            });
        </script>
@endsection