@extends('frontend.layouts.app_minimal')

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))
<?php //echo 1234;exit; ?>
@section('content')
    <div class="row justify-content-center align-items-center" style=" min-height: 75vh; ">
        <div class="col col-sm-8 align-self-center">
            {{--            <div class="card">--}}
            {{--                <div class="card-header">--}}
            <div class="text-center" style="font-size: small; font-weight: bold; text-justify: newspaper">
                <p>Graphics et al. is a tool which allows users to easily create S.T.E.M. specific artwork from a
                    library of specialty templates and scientifically accurate graphics.
                    Our goal is to improve scientific communication by giving everyone the power to easily create their
                    own visual aids.</p>
                <p>We need S.T.E.M. students, educators and researchers to test our program in the course of your
                    work.</p>
                <p>Tell us what works, what doesn't and what you'd like to see added</p>
            </div><!--card-header-->
            <div id="emailRegister">
                <div class="">
                    {{ html()->form('POST', route('frontend.auth.register_beta.post'))->open() }}
                    <div class="row g_et_al_header3">
                        <div class="col text-center" style="font-weight: bold">
                            Free early access - 3 months free subscription - Competitions and prizes
                        </div>
                    </div>
                    <div class="row g_et_al_header3">
                        <div class="col text-center" style="font-weight: bold">
                            Register your interest to become a beta tester for Graphics et al.
                        </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)

                                    }}
                            </div><!--form-group-->
                        </div><!--col-->
                    </div><!--row-->
                    {{--                    <div class="row">--}}
                    {{--                        <div class="col-12 col-md-4">--}}
                    {{--                            <div class="form-group">--}}
                    {{--                                {{ html()->label(__('validation.attributes.frontend.institution'))->for('institution_lookup_id') }}--}}
                    {{--                                <svg xmlns="http://www.w3.org/2000/svg"--}}
                    {{--                                     data-tippy-content="If your institiution doesn't show up in the list, just type it in"--}}
                    {{--                                     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()->select('institution_lookup_id')--}}
                    {{--                                   ->class('form-control')--}}
                    {{--                                   ->options($institution_lookup->pluck('text', 'id'))--}}
                    {{--                                   }}--}}

                    {{--                            </div><!--col-->--}}
                    {{--                        </div><!--row-->--}}
                    {{--                        <div class="col-12 col-md-4">--}}
                    {{--                            <div class="form-group">--}}
                    {{--                                {{ html()->label(__('validation.attributes.frontend.position'))->for('position_lookup_id') }}--}}
                    {{--                                <svg xmlns="http://www.w3.org/2000/svg"--}}
                    {{--                                     data-tippy-content="If your position doesn't show up in the list, just type it in"--}}
                    {{--                                     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()->select('position_lookup_id')--}}
                    {{--                                  ->class('form-control')--}}
                    {{--                                  ->options($position_lookup->pluck('text', 'id'))--}}

                    {{--                                  }}--}}
                    {{--                            </div><!--form-group-->--}}
                    {{--                        </div><!--col-->--}}
                    {{--                        <div class="col-12 col-md-4">--}}
                    {{--                            <div class="form-group">--}}
                    {{--                                {{ html()->label(__('validation.attributes.frontend.lab'))->for('beta_lab_data') }}--}}
                    {{--                                <svg xmlns="http://www.w3.org/2000/svg"--}}
                    {{--                                     data-tippy-content="Your lab- if you have people you want to work with" 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()->text('beta_lab_data')--}}
                    {{--                                    ->class('form-control')--}}
                    {{--                                    ->placeholder(__('validation.attributes.frontend.lab'))--}}
                    {{--                                    ->attribute('maxlength', 191)--}}
                    {{--                                     }}--}}
                    {{--                            </div><!--form-group-->--}}
                    {{--                        </div><!--col-->--}}
                    {{--                    </div><!--row-->--}}

                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                {{ html()->label(__('validation.attributes.frontend.email'))->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.password'))->for('password') }}--}}
                    {{--                                <svg xmlns="http://www.w3.org/2000/svg"--}}
                    {{--                                     data-tippy-content="The password must be at least 8 characters long" 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 mb-2">
                        <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 class="row mt-2">
                        <div class="col">
                            <p style="font-weight: bold; font-size: smaller">Beta testing will run throughout April
                                2021. We will contact you prior to commencement to organise training. For any questions
                                or to de-register your interest please contact Chris at <a
                                    href="mailto:info@graphicsetal.com">info@graphicsetal.com</a></p>
                        </div>
                    </div>

                </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]', {

                // enable it
                inlinePositioning: true,
                placement: 'auto-end',
            });

            $('select').select2({
                placeholder: 'Select...',
                tags: true
            });


            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

@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" id="additemtitle">Terms and conditions</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">

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

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

@if(config('access.captcha.registration'))
    {{-- {!! app('captcha')->renderFooterJS('en') !!} --}}
@endif
