@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()]) }}" onsubmit="return checkInputs()">
            @csrf
            @method("put")
            <span>{{__('msg.navn')}}:</span>
            <input type="text" value="{{ Auth::user()->name_first . " " . Auth::user()->name_last }}" disabled>
            <span>{{__('msg.email')}}:</span>
            <label hidden id="erroremail">Denne email er allerede taget!</label>
            <input type="email" name="email" id="email" placeholder="x@y.z" value="{{ Auth::user()->email }}" required>
            <span>{{__('msg.telefon')}} Nr.:</span>
            <label hidden id="errorphone">Dette telefon nr. er allerede taget!</label>
            <input type="tel" name="phone" id="phone" value="{{ Auth::user()->phone }}" placeholder="12345678" pattern="[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" required>
            <button type="submit" class="btn text-center btn-sde-blue mt-1">{{__('msg.rediger')}}</button>
            <a onclick="window.history.back()" class="btn text-center btn-sde-blue mt-1">{{__('msg.tilbage')}}</a>
        </form>
    </main>
@endsection

@section("scripts")
    <script src="{{ asset("/js/jquery-3.2.1.min.js") }}"></script>
    <script>
        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': {{Auth::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 (save)
                return true;
            else
                return false;
        }
    </script>
@endsection