@extends("user.layout.base")

@section("title")
    Sign up
@endsection

@section("content")
    <main style="background-color: #00788a; height: 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>
        <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 style="margin-bottom: 1.5rem;">
            <!--<label style="color: white">Education end date:</label>
            <input class="appinput" type="date" name="eduenddate" placeholder="Education end date" required>-->
            <!--Koncept-->
            <!--<label style="color: white" for="edu">Education:</label>
            <select style="color: white" name="edu" id="edu">
                <option value="datapro">Datatekniker med programmering</option>
                <option value="datainf">Datatekniker med infrastruktur</option>
                <option value="dataits">Datatekniker med IT-Support</option>-->
                <!--<option value="saab">Murer</option>
                <option value="opel">Tømmer</option>
                <option value="audi">Maler</option>-->
            <!--</select>-->
            <!--Koncept-->
            <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>
    </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