@extends('layouts.auth.layout')
@section('content')
    <style>
        input.parsley-success,select.parsley-success, textarea.parsley-success{
            color: inherit;
            border: 1px solid #ced4da;
        }
    </style>
    <div class="container page-wrapper">

        <a href="#" class="logos"><img src="/assets/img/logos.png" alt=""></a>
        <div id="errorMessagesWrapper"></div>
        <div class="row signup-wrapper">
            @if ($errors->any() || session('status'))
                @if(session()->has('error') || session('status'))
                    @if(session('status'))
                        <div class="col-12 frm-msg-wrapper">
                            <p><strong>{{  session('status') }}</strong></p>
                        </div>
                    @endif
                    @if (session()->has('error'))
                        <div class="col-12 frm-msg-wrapper">
                            <p><strong>{{  session()->get('error') }}</strong></p>
                            @foreach ($errors->all() as $error)
                                <p> {{ $error }}</p>
                            @endforeach
                        </div>
                    @endif
                @endif
            @endif

            <div id="error" style="display: none;width: 66rem;
            margin-left: 2rem;">
                @include('auth.failed_validation')
            </div>
            <div id="verify" style="display: none;width: 66rem;
            margin-left: 2rem;">

                @include('auth.verify_email')
            </div>
            <div class="col-lg-4 col-md-4 signup-wrapper-sidebar">
                @if(isset($signUpNowTitle))
                    <h2>{!!$signUpNowTitle!!}</h2>
                @else <h2>Slug not set to 'sign-up-left-blue-box-title'  please edit the ExperienceText in admin panel</h2>
                @endif

                @if(isset($signUpNowMessage))
                    <p>{!!$signUpNowMessage!!}</p>
                @else <h2>Slug not set to 'sign-up-left-blue-box-message' please edit the ExperienceText in admin panel</h2>
                @endif

                <div class="login-text">Already Signed Up? <a class="login-link" href="{{route('home')}}">Login Here</a>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 signup-wrapper-main">
                <div id="loading" style="display: none;margin-top: 13rem;"><img src="/assets/img/loading.gif" style="
                    margin-left: 14rem;"></div>

                <div id="verifyemail" class="h-100" style="display: none">

                </div>
                <div id="terms" class="h-100" style="display: none">

                    <form action="" class="">
                        <div class="row">
                            <div class="col-md-12">
                                <a href="#" class="btn-frm-back" id="backBtn">
                                    <svg class="chevron-left-large" xmlns="http://www.w3.org/2000/svg" width="30.25"
                                         height="55" viewBox="0 0 30.25 55">
                                        <g>
                                            <path id="Path_1985" data-name="Path 1985"
                                                  d="M30.25,2.75,27.5,0,0,27.5,27.5,55l2.75-2.75L5.16,27.5Z"
                                                  fill="#41b6e6"/>
                                        </g>
                                    </svg>
                                    Back</a>
                            </div>
                        </div>
                        <div class="row terms-wrapper">
                            <div class="col-md-12">
                                <div id="terms-condition">
                                </div>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-md-8 pl-0">
                                <label for="termsCheckBox"><input type="checkbox" name="termsCheckBox" id="termsCheckBox" class="form-label">I have
                                    read
                                    and agree to the terms and conditions.</label>

                            </div>
                            <div class="col-md-4 pr-0">
                                <button type="button" class="btn btn-frm-next signUp">Sign up</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="form">
                    <form method="POST" action="#" id="registerForm" autocomplete="off">
                        <div class="row frm-row">
                            <div class="col-md-6">
                                <label for="" class="form-label">@lang('admin.First Name')</label>
                                <input type="text" name="first_name" class="form-control" id="first_name" required
                                       maxlength="255"
                                       value="{{ old('first_name') }}">
                            </div>
                            <div class="col-md-6">
                                <label for="" class="form-label">@lang('admin.Last Name')</label>
                                <input type="text" name="last_name" class="form-control" id="last_name" required
                                       maxlength="255"
                                       value="{{ old('last_name') }}">
                            </div>
                        </div>
                        <div class="row frm-row">
                            <div class="col-md-6">
                                <label for="" class="form-label">WORK EMAIL ADDRESS</label>
                                <input type="text" name="email" class="form-control" id="email" required
                                       value="{{ old('email') }}"
                                       data-parsley-type="email"
                                       data-parsley-trigger="focusout"
                                       data-parsley-checkemail
                                       data-parsley-checkemail-message="Email Address already Exists">
                            </div>
                            <div class="col-md-6">
                                <label for="" class="form-label">JOB ROLE</label>
                                <select name="job_role" class="form-control" id="job_role" required
                                        data-parsley-error-message="! Must be selected">
                                    <option value="">Select</option>
                                    @foreach($jobsRole as $job)
                                        <option value="{{ $job->id }}"
                                                @if(old('job_role')==$job->id) selected @endif>{{ $job->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row frm-row">
                            <div class="col-md-6">
                                <label for="" class="form-label">CREATE PASSWORD</label>
                                <div class="position-relative">
                                    <input type="password" name="password"
                                           class="form-control"
                                           id="password" required
                                           minlength="8"
                                           data-parsley-special="1">
                                    <a href="#" class="position-absolute toggle-password show">
                                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="eye"
                                             class="svg-inline--fa fa-eye fa-w-18" role="img"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                                            <path fill="currentColor"
                                                  d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"></path>
                                        </svg>

                                    </a>
                                    <a href="#" class="position-absolute toggle-password hidden">
                                        <svg aria-hidden="true" focusable="false" data-prefix="far"
                                             data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20"
                                             role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                                            <path fill="currentColor"
                                                  d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"></path>
                                        </svg>
                                    </a>
                                    {{--                                        <i toggle="#password-field"--}}
                                    {{--                                       class="position-absolute fa fa-fw fa-eye field_icon toggle-password"></i>--}}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label for="country" class="form-label">COUNTRY</label>
                                <select name="country" class="form-control" id="country" required
                                        data-parsley-error-message="! Must be selected">
                                    <option value="">Select</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}"
                                                @if(old('country')== $country->id) selected @endif>{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row frm-row">
                            <div class="col-md-6">
                                <label for="" class="form-label">STATE OR PROVINCE</label>
                                <input type="text" name="state" class="form-control" id="state" required
                                       value="{{ old('state') }}"
                                       data-parsley-error-message="State / Province is required">
                            </div>
                        </div>
                        <div class="row btn-frm-wrapper">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-frm-next terms" style="display: none">Next</button>
                                <button type="button" class="btn btn-frm-next" id="validateForm">Next</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        let $propertyID = null;
        let hideTimeOut = 8000;
        let requestFail = 'Unexpected error, please try again';
        $(function () {



            $('body').on('click', '#validateForm', function (e) {
                $('#termsCheckBox').prop("checked", false);
                //validate special chars
                window.ParsleyValidator.addValidator('special', {
                    requirementType: 'number',
                    validateString: function (value, requirement) {
                        let specials = value.match(/[^a-zA-Z0-9]/g) || [];
                        return specials.length >= requirement;
                    },
                    messages: {
                        en: 'Your password must contain at least (%s) special character.'
                    }
                });
                //validate is true
                if ($('#registerForm').parsley().validate() !== false) {
                    $('#validateForm').hide();
                    $('#form').hide();
                    //fire load terms
                    $.ajax({
                        url: '{{ route('register.terms') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            domain: '{{ $domain }}',
                            propertyEmail: $('#email').val(),
                            state: $('#state').val(),
                        },
                        success: function (data) {
                            console.log(data);
                            if (data.failed === true) {
                                $('#errorMessagesWrapper').html('<div class="row mb-1 mt-3" style="background-color:#0076CE;color: white;height: 5rem;"><div style="padding: 1rem;">' + data.message + '</div></div>');
                                $('#errorMessagesWrapper').show();
                                setTimeout(function () {
                                    $('#errorMessagesWrapper').hide();
                                }, hideTimeOut);

                                $('#form').show();
                                $('#validateForm').show();
                                $('.terms').hide();

                            } else {
                                $propertyID = data.propertyID;
                                $('#error').hide();
                                $('#terms').show();
                                $('#terms-condition').html(data.data);
                            }
                        },
                        beforeSend: function () {
                            $("#loading").show();
                        },
                        complete: function () {
                            $("#loading").hide();
                        }, fail: function () {
                            $('#errorMessagesWrapper').html('<div class="row mb-1 mt-3" style="background-color:#0076CE;color: white;height: 5rem;"><div style="padding: 1rem;">' + requestFail + '</div></div>');
                            $('#errorMessagesWrapper').show();
                            setTimeout(function () {
                                $('#errorMessagesWrapper').hide();
                            }, hideTimeOut);
                        }
                    })
                    e.preventDefault();
                }
                return false;
            });
            //back button to form
            $('#backBtn').on('click', function (e) {
                $('#terms').hide();
                $('#form').show();
                $('#validateForm').show();
                e.preventDefault();
            })

            //click sign up button
            $('.signUp').on('click', function (e) {
                //if terms are clicked
                if ($("input[type=checkbox]").is(":checked")) {
                    //check if email exists in db
                    $.ajax({
                        method: 'POST',
                        url: '{{ route('register.check-email') }}',
                        data: {
                            _token: '{{ csrf_token() }}',
                            email: $('#email').val(),
                        },
                        success: function (data) {
                            if (data.status === 'fail') {
                                //display message if email exists
                                $('#errorMessagesWrapper').html('<div class="row mb-1 mt-3" style="background-color:#0076CE;color: white;height: 5rem;"><div style="padding: 1rem;">' + data.message + '</div></div>');
                                $('#errorMessagesWrapper').show();
                                setTimeout(function () {
                                    $('#errorMessagesWrapper').hide();
                                }, hideTimeOut);

                            } else if (data.status === 'pass') {
                                //pass to register
                                $.ajax({
                                    url: '{{ route('register') }}',
                                    method: 'POST',
                                    data: {
                                        _token: '{{ csrf_token() }}',
                                        first_name: $('#first_name').val(),
                                        last_name: $('#last_name').val(),
                                        email: $('#email').val(),
                                        job_role: $('#job_role').val(),
                                        password: $('#password').val(),
                                        country: $('#country').val(),
                                        state: $('#state').val(),
                                        property: $propertyID,
                                    },
                                    success: function (data) {
                                        console.log('success');
                                    },
                                    beforeSend: function () {
                                        $('#terms').hide();
                                        $("#loading").show();
                                    },
                                    complete: function (data) {
                                        $("#loading").hide();
                                        $('#verifyemail').show();
                                        let content = data.responseJSON;
                                        $('#verifyemail').html('<strong><h2>' + content.title + '</h2></strong>' + content.message);
                                        setTimeout(function () {
                                            $('#errorMessagesWrapper').hide();
                                        }, hideTimeOut);
                                    },
                                    fail: function () {
                                        $('#errorMessagesWrapper').html('<div class="row " style="background-color:#0076CE;color: white;height: 5rem;"><div style="padding: 1rem;">' + requestFail + '</div></div>');
                                        $('#errorMessagesWrapper').show();
                                        setTimeout(function () {
                                            $('#errorMessagesWrapper').hide();
                                        }, hideTimeOut);
                                    }
                                });
                            }
                        },
                        fail: function () {
                            $('#errorMessagesWrapper').html('<div class="row mb-1 mt-3" style="background-color:#0076CE;color: white;height: 5rem;"><div style="padding: 1rem;">' + requestFail + '</div></div>');
                            $('#errorMessagesWrapper').show();
                            setTimeout(function () {
                                $('#errorMessagesWrapper').hide();
                            }, hideTimeOut);
                        }
                    })

                } else {
                    $('#errorMessagesWrapper').html('<div class="row mb-1 mt-3" style="background-color:#0076CE;color: white;height: 5rem;"><div style="padding: 1rem;">You must accept the terms and conditions to proceed with registration</div></div>');
                    $('#errorMessagesWrapper').show();
                }
                e.preventDefault();
            });
        })
    </script>
@stop