@extends("app.layout.base")

@section("title")
    Settings
@endsection

@section("content")
    <script src="{{ asset("/js/jquery-3.2.1.min.js") }}"></script>
    <main style="justify-content: unset">
        <label for="langu" class="mt-2">Sprog / Languages:</label>
        <select name="langName" id="lang">
            @if(request()->cookie('languagesSetting') == "dk")
                <option style="color: black;" selected name="langDK" value="dk">Dansk</option>
            @else
                <option style="color: black;" name="langDK" value="dk">Dansk</option>
            @endif
            @if(request()->cookie('languagesSetting') == "en")
                <option selected style="color: black;" name="langEN" value="en">English</option>
            @else
                <option name="langEN" style="color: black;" value="en">English</option>
            @endif
        </select>
        <label for="dark">Tema / Theme:</label>
        <select name="light" id="darkmode">
            @if(request()->cookie('mode') == "light")
                <option selected name="ligthmode" style="color: black;" value="Light">{{ __("msg.lys") }}</option>
            @else
                <option name="light" style="color: black;" value="light">{{ __("msg.lys") }}</option>
            @endif
            @if(request()->cookie('mode') == "dark")
                <option selected name="darkmode" style="color: black;" value="dark">{{ __("msg.mørk") }}</option>
            @else
                <option name="dark" style="color: black;" value="dark">{{ __("msg.mørk") }}</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