@extends("user.layout.base")

@section("title")
    Sign up
@endsection

@section("content")
    <style>
        img{
            margin-top: 30%;
        }
    </style>
    <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.store") }}" method="post">
            @csrf
            <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" name="email" placeholder="E-mail" required>
            <input class="appinput" type="password" name="password" id="password1" placeholder="Password" required>
            <label hidden id="errornotsamepass" for="errormesseages">Password dosen't match</label>
            <input class="appinput" type="password" name="password2" id="password2" placeholder="Confirm password" required>
            <input class="appinput" type="tel" name="phone" placeholder="Phone number" required>
            <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">
        </form>
        <button onclick="window.history.back()" class="btn btn-dark" >Back</button>
    </main>



    <script>
        if ($('#password1').val() != $('#password2').val()) {
            $("#errornotsamepass").show(100);
            $("#errornotsamepass").css('color', 'red');
            $("#disable").prop('disabled', true);
        } else
            $("#errornotsamepass").hide();
    </script>
@endsection