Ekapp/skolehjem/resources/views/app/settings/index.blade.php

@extends("app.layout.base")

@section("title")
    Settings
@endsection

@section("content")
    <style>
        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 28px;
        }

        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #00788A;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #00788A;
        }

        input:checked + .slider:before {
            transform: translateX(32px);
        }

        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>
    <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>
        <label for="dark">E-mail Notifikationer / E-mail Notifications:</label>
        <div>
            <label class="switch">
                @if(\App\User::query()->where('id', '=', auth()->user()->id)->first()->wants_emails == true)
                    <input type="checkbox" checked>
                @else
                    <input type="checkbox">
                @endif
                <span class="slider round"></span>
            </label>
        </div>
    </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