@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" onclick="ajaxCall(this)" checked>
                @else
                    <input type="checkbox" onclick="ajaxCall(this)">
                @endif
                <span class="slider round"></span>
            </label>
        </div>
        <div id="snackbar"></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);
                    }
                });
            })

        })

        function snackbar(data) {
            var x = document.getElementById("snackbar");
            x.innerHTML = data;
            x.className = "show";

            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }

        function ajaxCall(el) {
            if (el.hasAttribute('checked')) {
                axios.post("{{ route("users.createajaxcancel") }}", {}
                ).then(function (response) {
                    var data = response.data;

                    snackbar(data);

                    el.removeAttribute('checked');
                }).catch(function (error) {
                    console.log(error);
                });
            } else {
                axios.post("{{ route("users.createajax") }}", {}
                ).then(function (response) {
                    var data = response.data;

                    snackbar(data);

                    el.setAttribute('checked', 'checked');
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }

    </script>
@endsection