@extends('layouts.app')
@section('head')
    <script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css" rel="stylesheet">
@endsection
@section('template_title')
    Регистрация
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <div class="mb-5 p-4 bg-white shadow-sm">
                    <h3>Регистрация</h3>

                    <div id="bs-stepper" class="bs-stepper linear">
                        <div class="bs-stepper-header" role="tablist">
                            <div class="step active" data-target="#user-form-1">
                                <button type="button" class="step-trigger" role="tab" id="stepper1trigger1"
                                        aria-controls="test-l-1" aria-selected="true">
                            <span class="bs-stepper-circle">
                                <span class="fa fa-user" aria-hidden="true"></span>
                            </span>
                                    <span class="bs-stepper-label">Пользователь</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#company-form-2">
                                <button type="button" class="step-trigger" role="tab" id="stepper1trigger2"
                                        aria-controls="test-l-2" aria-selected="false" disabled="disabled">
                             <span class="bs-stepper-circle">
                                <span class="fa fa-building" aria-hidden="true"></span>
                            </span>
                                    <span class="bs-stepper-label">Компания</span>
                                </button>
                            </div>
                            <div class="bs-stepper-line"></div>
                            <div class="step" data-target="#password-form-3">
                                <button type="button" class="step-trigger" role="tab" id="stepper1trigger3"
                                        aria-controls="test-l-3" aria-selected="false" disabled="disabled">
                            <span class="bs-stepper-circle">
                                <span class="fa fa-key" aria-hidden="true"></span>
                            </span>
                                    <span class="bs-stepper-label">Пароль</span>
                                </button>
                            </div>
                        </div>


                        <div class="bs-stepper-content">
                            <form id="reg_form" method="POST" action="{{ route('register') }}">
                                @csrf
                                <div id="user-form-1" role="tabpanel" class="bs-stepper-pane active dstepper-block"
                                     aria-labelledby="stepper1trigger1">
                                    <div class="form-group">
                                        <label for="email">{{ __('E-Mail') }}</label>

                                        <input id="email" type="email"
                                               class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                               name="email" value="{{ old('email') }}" required autofocus>

                                        @if ($errors->has('email'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                        @endif
                                    </div>

                                    <div class="form-group">
                                        <label for="last_name">{{ __('Фамилия') }}</label>

                                        <input id="last_name" type="text"
                                               class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}"
                                               name="last_name" value="{{ old('last_name') }}" required>
                                        @if ($errors->has('last_name'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('last_name') }}</strong>
                                    </span>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="first_name">{{ __('Имя') }}</label>
                                        <input id="first_name" type="text"
                                               class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}"
                                               name="first_name" value="{{ old('first_name') }}" required>
                                        @if ($errors->has('first_name'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('first_name') }}</strong>
                                    </span>
                                        @endif
                                    </div>


                                    <button type="button" class="btn btn-primary" onclick="stepper.next()">Вперёд
                                    </button>
                                </div>
                                <div id="company-form-2" role="tabpanel" class="bs-stepper-pane"
                                     aria-labelledby="stepper1trigger2">
                                    <div class="form-group">
                                        <label for="company">{{ __('Название компании') }}</label>

                                        <input id="company" type="text"
                                               class="form-control{{ $errors->has('company') ? ' is-invalid' : '' }}"
                                               name="company" value="{{ old('company') }}" required autofocus>
                                        @if ($errors->has('company'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('company') }}</strong>
                                    </span>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="tel">{{ __('Телефон') }}</label>

                                        <input id="tel" type="text"
                                               class="form-control{{ $errors->has('tel') ? ' is-invalid' : '' }}"
                                               name="tel"
                                               value="{{ old('tel') }}" required autofocus>
                                        @if ($errors->has('tel'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('tel') }}</strong>
                                    </span>
                                        @endif
                                    </div>

                                    <div class="form-group ">
                                        <label for="country">{{ __('Страна') }}</label>
                                        <select class="custom-select" id="country" name="country" required>
                                            @foreach ($countries as $country)
                                                @if (empty(old('country')))
                                                    <option {{ $country == 'Россия' ? 'selected': '' }}>{{$country}}</option>
                                                @else
                                                    <option {{ old('country') == $country ? 'selected': '' }}>{{$country}}</option>
                                                @endif

                                            @endforeach
                                        </select>
                                        @if ($errors->has('country'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('country') }}</strong>
                                    </span>
                                        @endif
                                    </div>
                                    <div class="form-group ">
                                        <label for="city">{{ __('Город') }}</label>
                                        <input id="city" type="text"
                                               class="form-control{{ $errors->has('city') ? ' is-invalid' : '' }}"
                                               name="city" value="{{ old('city') }}" required autofocus>
                                        @if ($errors->has('city'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('city') }}</strong>
                                    </span>
                                        @endif
                                    </div>

                                    <button type="button" class="btn btn-primary" onclick="stepper.previous()">Назад
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="stepper.next()">Вперёд
                                    </button>
                                </div>
                                <div id="password-form-3" role="tabpanel" class="bs-stepper-pane"
                                     aria-labelledby="stepper1trigger3">
                                    <div class="form-group">
                                        <label for="password">{{ __('Придумайте пароль') }}</label>
                                        <input id="password" type="password"
                                               class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                               name="password" required>
                                        @if ($errors->has('password'))
                                            <span class="invalid-feedback">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="password-confirm">{{ __('Повторите пароль') }}</label>
                                        <input id="password-confirm" type="password" class="form-control"
                                               name="password_confirmation" required>
                                    </div>

                                    @if(config('settings.reCaptchStatus'))
                                        <div class="g-recaptcha"
                                             data-sitekey="{{ config('settings.reCaptchSite') }}"></div>
                                    @endif
                                    <button type="button" class="btn btn-primary mt-3" onclick="stepper.previous()">
                                        Назад
                                    </button>
                                    <button type="submit" class="btn btn-success mt-3">Регистрация</button>
                                    <p class="small">
                                        Нажимая "Регистрация", вы принимаете <a href="/agreement">Пользовательское
                                            соглашение</a> и даете согласие на обработку персональных данных
                                    </p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-2"></div>
        </div>

    </div>
@endsection

@section('footer_scripts')
    @if(config('settings.reCaptchStatus'))
        <script src='https://www.google.com/recaptcha/api.js'></script>
    @endif
    <script type="text/javascript">
        var stepper;
        $(document).ready(function () {
            let stepperEl = document.querySelector('#bs-stepper')
            stepper = new Stepper(stepperEl);
            var stepperPanList = [].slice.call(stepperEl.querySelectorAll('.bs-stepper-pane'));

            stepperEl.addEventListener('show.bs-stepper', function (event) {
                $("#reg_form").removeClass('was-validated');
                var currentStep = event.detail.from;

                var stepperPan = stepperPanList[currentStep];
                if (stepperPan.getAttribute('id') === 'user-form-1'
                    && (!$('#email').val().length
                        || !$('#first_name').val().length
                        || !$('#last_name').val().length)){
                    event.preventDefault();
                    $("#reg_form").addClass('was-validated');
                }
                if (stepperPan.getAttribute('id') === 'user-form-1'
                    && !isEmail($('#email').val())){
                    event.preventDefault();
                    $("#email").addClass('is-invalid');
                }
                else {
                    $("#email").removeClass('is-invalid');
                }
                if(stepperPan.getAttribute('id') === 'company-form-2'
                    && (!$('#company').val().length
                        || !$('#tel').val().length
                        || !$('#city').val().length)){
                    event.preventDefault();
                    $("#reg_form").addClass('was-validated');
                }
            });

            function isEmail(email) {
                var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                return regex.test(email);
            }
        })
    </script>
@endsection