@extends("app.layout.base")

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

@section("content")
    <style>
        textarea {
            color: black;
        }
    </style>
    <main style="min-height: calc(100% - 61.34px)" class="text-center">
        <div method="post" style="margin-top: 4rem; margin-bottom: auto; max-width: 100%; padding: 0 0.45rem 0 0.45rem; display: flex; flex-direction: column; justify-content: center;">
            @csrf
            <span>Ris el. Ros?</span>
            <select id="suggestion_form" name="suggestion_form" class="mb-2" required>
                <option selected>Ros</option>
                <option>Ris</option>
            </select>
            <span>Besked:</span>
            <textarea id="message" name="message" placeholder="Skriv Ris/Ros besked her" style="resize: vertical;" required></textarea>
            <button onclick="ajaxCall(document.getElementById('suggestion_form'), document.getElementById('message'))" class="btn btn-sde-blue mt-2">Send Ris/Ros</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