@extends("app.layout.base")

@section("title")
    Account
@endsection

@section("content")
    <main class="justify-unset">
        <h1 class="text-center sde-blue mt-1">{{__('msg.konto')}}</h1>
        <form method="post" action="{{ route("users.accountupdate", ['user' => Auth::user()]) }}">
            @csrf
            @method("put")
            <span>{{__('msg.nuværendepassword')}}:</span>
            <div class="input-group text-left">
                <input type="password" class="form-control" 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>
            </div>
            <span>{{__('msg.nytpassword')}}:</span>
            <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="new" placeholder="******" required>
                <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-new" onclick="show('new', 'fa-new')"></span>
            </div>
            <span>{{__('msg.confirmpassword')}}:</span>
            <div class="input-group text-left">
                <input type="password" class="form-control" name="confirmpassword" id="confirm" placeholder="******" required>
                <span class="fa fa-fw fa-eye field-icon toggle-password" id="fa-confirm" onclick="show('confirm', 'fa-confirm')"></span>
            </div>
            {!! session()->get('error#notsamepass') !!}
            {!! session()->get('error#oldpass') !!}
            <button type="submit" class="btn text-center btn-sde-blue mt-auto">{{__('msg.rediger')}}</button>
            <a onclick="window.history.back()" class="btn text-center btn-sde-blue mt-1">{{__('msg.tilbage')}}</a>
        </form>

    </main>
    <style>
        input {
            width: calc(100% - 8px);
        }
    </style>
@endsection

@section("scripts")
    @if(request()->cookie("mode") == "dark")
        <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 = "#333333";
                } else {
                    inputPass.type = "password";
                    faEye.style.color = "#ffffff";
                }
            }
        </script>
    @else
        <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 = "#333333";
                } else {
                    inputPass.type = "password";
                    faEye.style.color = "#808080";
                }
            }
        </script>
    @endif
@endsection