@extends("app.layout.base")

@section("title")
    Account
@endsection

@section("content")
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <main>
        <h1 class="text-center sde-blue mt-0">{{__('msg.konto')}}</h1>
        <h4 class="mt-0">{{__('msg.navn')}}: {{ Auth::user()->name_first . " " . Auth::user()->name_last }}</h4>
        <h4 class="mt-0">{{__('msg.email')}}: {{ Auth::user()->email }}</h4>
        <h4 class="mt-0">{{__('msg.telefon')}} Nr.: {{ Auth::user()->phone }}</h4>
        {!! session()->get('success#credentialschanged') !!}
        <a class="btn text-center btn-sde-blue mt-1" href="{{ route("users.accountedit") }}">{{__('msg.redigeroplysninger')}}</a>
        <a class="btn text-center btn-sde-blue mt-1" href="{{ route("users.accounteditpass") }}">{{__('msg.ændrepassword')}}</a>

        <label for="langu">Sprog / Languages:</label>
        <select name="langName" id="lang">
            @if(request()->cookie('languagesSetting') == "dk")
                <option selected name="langDK" value="dk">Dansk</option>
            @else
                <option name="langDK" value="dk">Dansk</option>
            @endif
            @if(request()->cookie('languagesSetting') == "en")
                <option selected name="langEN" value="en">English</option>
            @else
                <option name="langEN" value="en">English</option>
            @endif

        </select>


        <label for="dark">Sprog / Languages:</label>
        <select name="light" id="darkmode">
            @if(request()->cookie('mode') == "light")
                <option selected name="ligthmode" value="Light">Light</option>
            @else
                <option name="light" value="light">Light</option>
            @endif
            @if(request()->cookie('mode') == "dark")
                <option selected name="darkmode" value="dark">Dark</option>
            @else
                <option name="dark" value="dark">Dark</option>
            @endif

        </select>

    </main>

    <script>
        $(document).ready(function (){
            $('#lang').change(function () {
                $value = $('#lang').find(":selected").val();
                $.ajax({
                    type: 'get',
                    url: '{{route('users.setLanguages')}}',
                    data: {'lang':$value},
                    success:function (data) {
                        console.log($value);
                        location.reload();
                    },
                    error:function (data) {
                        console.log(data);
                    }
                });
            })


            $('#darkmode').change(function () {
                $darkmodeON = $('#darkmode').find(":selected").val();
                $.ajax({
                    type: 'get',
                    url: '{{route('users.setDarkMode')}}',
                    data: {'darkmode':$darkmodeON},
                    success:function (data) {
                        console.log($darkmodeON);
                        location.reload();
                    },
                    error:function (data) {
                        console.log(data);
                    }
                });
            })

        })

    </script>

@endsection