@extends("admin.layout.base")
@extends("admin.layout.header")

@section("title")
    Bruger - Opret
@endsection

@section("path")
    <a href="{{ route('users.create') }}" class="text-white">Opret Bruger</a> /
@endsection

@section("content")
    <h1 id="errormesseages" >Opret Bruger:</h1>
    {!! session()->get('error#notsamepass') !!}
    {!! session()->get('EmailExists') !!}
    {!! session()->get('PhoneExists') !!}
    <form method="post" action="{{ route("users.store") }}">
        @csrf
        <label for="name_first">Fornavn:</label>
        <label hidden id="error" for="errormesseages">Dette Event navn findes allerede</label>
            <input type="text" name="name_first" id="name_first" placeholder="Fornavn" required>
        <label for="name_last">Efternavn:</label>
            <input type="text" name="name_last" id="name_last" placeholder="Efternavn" required>
        <label for="email">Email:</label>
            <input type="email" name="email" id="email" placeholder="x@y.z" required>
        <label for="password1">Adgangskode:</label>
        <div class="input-group text-left">
            <input type="password" class="form-control" name="password" id="password1" placeholder="******" required>
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-new" onclick="show('password1', 'fa-new')"></span>
        </div>
        <label for="password2">Bekræft Adgangskode:</label>
        <div class="input-group text-left">
            <input type="password" class="form-control" name="password2" id="password2" placeholder="******" required>
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-confirm" onclick="show('password2', 'fa-confirm')"></span>
        </div>
        <label for="phone">Telefon nr:</label>
            <input type="tel" name="phone" id="phone" placeholder="12345678" pattern="[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" required>
        <label for="roles">Rolle:</label>
        <select name="roles[]" id="roles" class="mb-2" multiple="multiple" required>
            <option disabled selected value> -- Vælg Rolle(r) -- </option>
            <option value="">Ingen Rolle</option>
            @foreach($roles as $role)
                <option value="{{ $role->name }}">{{ $role->name }}</option>
            @endforeach
        </select>
        <input type="submit" id="disable" class="btn btn-dark text-white" value="Opret">
    </form>
@endsection

@section("scripts")
    <script>
        function show($passID, $faID) {
            var inputPass = document.getElementById($passID);
            var faEye = document.getElementById($faID);

            if (inputPass.type === "password") {
                inputPass.type = "text";
                faEye.style.color = "#000";
            } else {
                inputPass.type = "password";
                faEye.style.color = "#808080";
            }
        }
    </script>
    <script>
        $(function() {
            $('form').areYouSure(
                {
                    message: 'It looks like you have been editing something. '
                        + 'If you leave before saving, your changes will be lost.'
                }
            );
        });

        $(document).ready(function () {
            $mail = $('#email').val();
            //$phone = $('#phone').val();
            $.ajax({
                type: 'get',
                url: '{{route('users.nameCheck')}}',
                data: {'mailChek':$mail},
                success:function (data) {
                    console.log(data);
                    if(data){
                        $("#error").show(100);
                        $("#error").css('color', 'red');
                        $("#disable").prop('disabled', true);
                        $('#disable').css('cursor','not-allowed');
                    }else{
                        $("#error").hide();
                        $("#disable").prop('disabled', false);
                        $('#disable').css('cursor','pointer');
                    }

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

        $('#name').on('keyup', function () {
           // $mail = $('#email').val();
            $phone = $('#phone').val();
            $.ajax({
                type: 'get',
                url: '{{route('users.nameCheck')}}',
                data: {'mailCheck':$mail},
                success:function (data) {
                    console.log($mail);
                    if(data){
                        $("#error").show(100);
                        $("#error").css('color', 'red');
                        $("#disable").prop('disabled', true);
                        $('#disable').css('cursor','not-allowed');
                    }else{
                        $("#error").hide();
                        $("#disable").prop('disabled', false);
                        $('#disable').css('cursor','pointer');
                    }

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

    </script>
@endsection