@extends("app.layout.base")

@section("title")
    Account
@endsection

@section("content")
    <main>
        <h1 class="text-center sde-blue mt-0">Konto</h1>
        <form method="post" action="{{ route("users.update", ['user' => Auth::user()]) }}" style="display: inline-table;">
            @csrf
            @method("put")
            <span>Nuværende Password:</span>
            <input type="password" name="oldpassword" id="old" placeholder="******">
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-old" onclick="show('old', 'fa-old')"></span>
            <span>Nyt Password:</span>
            <input class="w-100" type="password" name="password" id="new" placeholder="******" required style="width: calc(100% - 8px)">
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-new" onclick="show('new', 'fa-new')"></span>
            <span>Bekræft Nyt Password:</span>
            <input class="w-100" type="password" name="confirmpassword" id="confirm" placeholder="******" required style="width: calc(100% - 8px)">
            <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-confirm" onclick="show('confirm', 'fa-confirm')"></span>
            {!! session()->get('error#notsamepass') !!}
            {!! session()->get('error#oldpass') !!}
            <button type="submit" class="btn text-center btn-sde-blue mt-1">Rediger</button>
        </form>
    </main>
    <style>
        input {
            width: calc(100% - 8px);
        }
    </style>
@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>
@endsection