@extends("user.layout.base")

@section("title")
    Sign up
@endsection

@section("content")
    <main class="bg-sde-blue h-100">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <div class="brand">
            <img src="{{URL::asset('/images/logos/Logo-hvid.svg')}}" alt="Syddansk Erhvervsskole">
        </div>
        @if (\App\AllowAction::query()->where('action', '=', 'Registering')->first()->allow == true)
            <form action="{{ route("users.signupStore") }}" method="post" onsubmit="return checkInputs()">
                @csrf
                <label hidden id="erroremail">E-mail already exists</label>
                <label hidden id="errornotsamepass" for="errormesseages">Password dosen't match</label>
                <label hidden id="errorphone">Phone number already in use</label>
                <input class="appinput" type="text" name="name_first" placeholder="Firstname" required>
                <input class="appinput" type="text" name="name_last" placeholder="Lastname" required>
                <input class="appinput" type="email" id="email" name="email" placeholder="E-mail" required>
                <input class="appinput" type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" name="password" id="password1" placeholder="Password" required>
                <input class="appinput" type="password" name="password2" id="password2" placeholder="Confirm password" required>
                <input class="appinput" type="tel" id="phone" name="phone" placeholder="Phone number" pattern="[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" required class="mb-2rem">
                <input class="btn btn-dark" type="submit" id="disable" value="Sign up">
                <input onclick="window.history.back()" class="btn btn-dark text-center" value="Back">
            </form>
        @else
            <h3 class="text-white text-center mt-3">Der er ikke åbent for registrering af elever lige nu</h3>
        @endif
    </main>

    <script>
        $(function() {
            $('form').areYouSure(
                {
                    message: 'It looks like you have been editing something. '
                        + 'If you leave before saving, your changes will be lost.'
                }
            );
        });

        function checkInputs() {
            var save = true;
            $mail = $('#email').val();
            $phone = $('#phone').val();
            $.ajax({
                'async': false,
                type: 'get',
                url: '{{route('users.nameCheck')}}',
                data: {'mailCheck':$mail, 'phoneCheck':$phone},
                success:function (data) {
                    if (data == 'both') {
                        $("#erroremail").show(100);
                        $("#erroremail").css('color', 'red');
                        $("#errorphone").show(100);
                        $("#errorphone").css('color', 'red');
                        save = false;
                    } else if(data == 'email'){
                        $("#errorphone").hide();
                        $("#erroremail").show(100);
                        $("#erroremail").css('color', 'red');
                        save = false;
                    } else if (data == 'phone') {
                        $("#erroremail").hide();
                        $("#errorphone").show(100);
                        $("#errorphone").css('color', 'red');
                        save = false;
                    } else {
                        $("#errorphone").hide();
                        $("#erroremail").hide();
                    }

                },
                error:function (data) {
                    console.log(data);
                }
            });

            // If passwords is not the same. Then show an error message and make save false
            if ($('#password1').val() != $('#password2').val()) {
                $("#errornotsamepass").show(100);
                $("#errornotsamepass").css('color', 'red');
                save = false;
            } else
                $("#errornotsamepass").hide();

            if (save)
                return true;
            else
                return false;
        }
    </script>
@endsection