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

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

@section("path")
    <a href="{{ route('users.edit', ['user' => $user]) }}" class="text-white">Rediger Bruger</a> /
@endsection

@section("content")
    <h1>Rediger Bruger:</h1>
    <form method="post" action="{{ route("users.update", ['user' => $user]) }}" onsubmit="return checkInputs()" enctype="multipart/form-data">
        @csrf
        @method("put")
        <label for="name_first">Fornavn:</label>
            <input type="text" name="name_first" id="name_first" value="{{ $user->name_first }}" required>
        <label for="name_last">Efternavn:</label>
            <input type="text" name="name_last" id="name_last" value="{{ $user->name_last }}" required>
        <label for="email">Email:</label>
        <label hidden id="erroremail">Der findes allerede en bruger med denne email!</label>
            <input type="email" name="email" id="email" placeholder="x@y.z" value="{{ $user->email }}" required>
        <label for="password1">Password: (Forblives blank, hvis password ikke skal ændres)</label>
        <label hidden id="errornotsamepass" for="errormesseages">Der stod ikke det samme i `Adgangskode` & `Bekræft Adgangskode`!</label>
        <div class="input-group text-left">
            <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Adgangskoden skal indeholde mindst et tal, et lille bogstav, et stort bogstav og have en minimumslængde på 8 karakterer" class="form-control" name="password" id="password1" value="" placeholder="******">
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-new" onclick="show('password1', 'fa-new')"></span>
        </div>
        <label for="password2">Confirm Password: (Forblives blank, hvis password ikke skal ændres)</label>
        <div class="input-group text-left">
            <input type="password" class="form-control" name="password2" id="password2" value="" placeholder="******">
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-confirm" onclick="show('password2', 'fa-confirm')"></span>
        </div>
        <label for="tel">Telefon nr:</label>
        <label hidden id="errorphone">Der findes allerede en bruger med dette telefon nr!</label>
            <input type="tel" name="phone" id="phone" value="{{ $user->phone }}" placeholder="12345678" pattern="[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" required>
        <label for="role">Rolle: (Brug ctrl og shift til at vælge flere)</label>
        <select class="w-100" name="roles[]" id="roles" class="mb-2" multiple="multiple" required>
                @if(count($user->roles) == 0)
                    <option disabled selected> -- Vælg Rolle(r) -- </option>
                    <option value>Ingen Rolle</option>
                    @foreach($roles as $role)
                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                    @endforeach
                @else
                    <option disabled> -- Vælg Rolle(r) -- </option>
                    <option value>Ingen Rolle</option>
                    @foreach($roles as $role)
                        {{ $selected = "" }}
                        @foreach($user->roles as $userRole)
                            @if($userRole->id == $role->id)
                                {{ $selected = "selected" }}
                            @endif
                        @endforeach
                        <option {{ $selected }} value="{{ $role->name }}">{{ $role->name }}</option>
                    @endforeach
                @endif
        </select>
        <label for="fileuploade">Skift brugerens profile billede:</label>
            <input id="fileuploade" type="file" name="resource" accept="image/*">
        <input type="submit" class="btn btn-dark text-white" value="Rediger">
    </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.'
                }
            );
        });

        function checkInputs() {
            var save = true;
            $mail = $('#email').val();
            $phone = $('#phone').val();
            $.ajax({
                'async': false,
                type: 'get',
                url: '{{route('users.nameCheckUpdate')}}',
                data: {'mailCheck':$mail, 'phoneCheck':$phone, 'id': {{$user->id}}},
                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