@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))

@section('content')
    <div class="row justify-content-center align-items-center" >
        <div class="col col-sm-8 align-self-center">
            {{--            <div class="card">--}}
            {{--                <div class="card-header">--}}
            <div class="g_et_al_header2 text-center">
                Register. It's cool. All the other kids are doing it.
                {{--                        @lang('labels.frontend.auth.register_box_title')--}}
            </div><!--card-header-->

            <div class="row">
                <div class="col">

                        @include('frontend.auth.includes.socialite-rows')

                    <div class="row">
                        <div class="col">
                            <button class="btn btn-outline-primary btn-block m-1"  type="button" data-toggle="collapse"
                                    data-target="#emailRegister" aria-expanded="false" aria-controls="emailRegister">
                                <i class="fas fa-at"></i>  Register with email
                            </button>

                        </div>
                    </div>
                </div><!--/ .col -->
            </div><!-- / .row -->

            <div class="collapse " id="emailRegister">
                <div class=" m-1">
                    {{ html()->form('POST', route('frontend.auth.register.post'))->open() }}
                    <div class="row g_et_al_header2">
                        <div class="col">
                            Login details<p/>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ html()->label(__('validation.attributes.frontend.first_name'))->for('first_name') }}
                                {{ html()->text('first_name')
                                    ->class('form-control required')
                                    ->placeholder(__('validation.attributes.frontend.first_name'))
                                    ->attribute('maxlength', 191)
                                    ->required()}}
                            </div><!--col-->
                        </div><!--row-->

                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                {{ html()->label(__('validation.attributes.frontend.last_name'))->for('last_name') }}
                                {{ html()->text('last_name')
                                    ->class('form-control required')
                                    ->placeholder(__('validation.attributes.frontend.last_name'))
                                    ->attribute('maxlength', 191)
                                    ->required() }}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->


                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                {{ html()->label(__('validation.attributes.frontend.email').' (This will be your username)')->for('email') }}
                                {{ html()->email('email')
                                    ->class('form-control required')
                                    ->placeholder(__('validation.attributes.frontend.email'))
                                    ->attribute('maxlength', 191)
                                    ->required() }}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                {{ html()->label(__('validation.attributes.frontend.choose').__('validation.attributes.frontend.password'))->for('password') }}
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     data-tippy-content="{{__('validation.attributes.frontend.password rules')}}" width="16"
                                     height="16" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                    <path
                                        d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
                                </svg>
                                {{ html()->password('password')
                                    ->class('form-control required')
                                    ->id('password')
                                    ->placeholder(__('validation.attributes.frontend.password'))
                                    ->required() }}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->

                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                {{ html()->label(__('validation.attributes.frontend.password_confirmation'))->for('password_confirmation') }}

                                {{ html()->password('password_confirmation')
                                    ->class('form-control required')
                                    ->id('password_confirmation')
                                    ->placeholder(__('validation.attributes.frontend.password_confirmation'))
                                    ->required() }}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->

                    <div class="row">
                        <div class="col">
                            <div class="form-group align-middle"><span>
                                <div class="pretty p-smooth mr-0 p-icon">
                                    <input type="checkbox" name="tnc" required>
                                    <div class="state p-success">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                             fill="currentColor" class="icon bi bi-check" viewBox="0 0 16 16">
                                            <path
                                                d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                                        </svg>
                                        <label> I accept the</label>
                                    </div>
                                </div>
                                <a href="#"

                                   data-toggle="modal" data-target="#disclaimer">Terms and
                                        conditions</a>
                                      </span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">

                            <div class="form-group mb-0 clearfix register_btn">
                                {{ form_submit(__('labels.frontend.auth.register_button'),'btn btn-block btn-success')}}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->
                    @if(config('access.captcha.registration'))
                        {!! app('captcha')->renderCaptchaHTML() !!}
                    @endif
                    {{ html()->form()->close() }}

                </div><!-- card-body -->
            </div>

        </div><!-- col-md-8 -->
    </div><!-- row -->
{{--    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>--}}

@endsection

@push('after-scripts')
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    @if(config('access.captcha.registration'))
        {{-- {!! app('captcha')->renderPolyfill() !!} --}}
        {{-- @captchaScripts() --}}
    @endif
    <script>
        'use strict';
        var password = document.getElementById("password")
        var confirm_password = document.getElementById("password_confirmation");

        $(document).ready(() => {
            // add tooltop functionality
            tippy('[data-tippy-content]');

            password.onchange = validatePassword;
            confirm_password.onkeyup = validatePassword;
        });

        function validatePassword(){
            if(password.value != confirm_password.value) {
                confirm_password.setCustomValidity("Passwords Don't Match");
            } else {
                confirm_password.setCustomValidity('');
            }
        }
    </script>
@endpush

@push('after-styles')
    <style>
{{--        --}}

/*        .collapse {*/
/*            visibility: hidden;*/
/*        }*/
/*        .collapse.show {*/
/*            visibility: visible;*/
/*            display: block;*/
/*        }*/
        .collapsing {
            position: relative;
            height: 0;
            overflow: hidden;
            -webkit-transition-property: height, visibility;
            transition-property: height, visibility;
            -webkit-transition-duration: 0.35s;
            transition-duration: 0.35s;
            -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
        }
        .collapsing.width {
            -webkit-transition-property: width, visibility;
            transition-property: width, visibility;
            width: 0;
            height: auto;
        }
        /*.select2 {*/
        /*    width:100%!important;*/
        /*}*/
    </style>
@endpush
@section('dialogs')
    <div id="disclaimer" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Terms and conditions</h4>
                    <button type="button" class="close modal-close-btn" data-dismiss="modal">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.94 129.94">
                            <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                                </g>
                            </g>
                        </svg>
                    </button>
                </div>

                <div class="modal-body">

                    @lang('strings.frontend.terms_and_conditions.text')

                </div>
            </div>
        </div>
    </div>
    @endsection