@extends("app.layout.base")

@section("title")
    Feedback - Ris/Ros
@endsection

@section("content")
    <main style="min-height: calc(100% - 61.34px)" class="text-center">
        <div method="post" class="mt-3 mb-auto d-flex flex-column pl-1 pr-1">
            @csrf
            <span>{{__("msg.risros")}}</span>
            <select id="suggestion_form" name="suggestion_form" class="mb-2" required>
                <option selected value="Ros">{{__("msg.ros")}}</option>
                <option value="Ris">{{__("msg.ris")}}</option>
                <option value="Andet">{{__("msg.andet")}}</option>
            </select>
            <span>{{__("msg.besked")}}:</span>
            <textarea class="text-black resize-vertical" id="message" name="message" placeholder="{{__("msg.besked")}}" required></textarea>
            <button onclick="ajaxCall(document.getElementById('suggestion_form'), document.getElementById('message'))" class="btn btn-sde-blue mt-2">{{__("msg.send")}}</button>
        </div>
        <div id="snackbar"></div>
    </main>
@endsection
@section("scripts")
    <script type="text/javascript">
        function snackbar(data) {
            var x = document.getElementById("snackbar");
            x.innerHTML = data;
            x.className = "show";

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

        function ajaxCall(suggestion_form, message) {
            var SF = suggestion_form.value
            var M = message.value

            if(SF != '' && M != '') {
                axios.post("{{ route("feedbacks.storeajax") }}",
                    {
                        suggestion_form: SF,
                        message: M
                    }
                ).then(function (response) {
                    snackbar('{{__("msg.feedbacksendt")}}');
                    message.value = "";
                }).catch(function (error) {
                    console.log(error);
                });
            } else {
                snackbar('{{__("msg.feedbackerror")}}');
            }
        }
    </script>
@endsection