@extends('layouts.app')

@section('content')

<h1 class="text-center">{{ __('feedback.title') }}</h1>
<hr class="my-4" />

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            {{--<div class="alert alert-success alert-dismissible fade show d-none" role="alert" name="successMessageDiv">
                <strong name="successMessage"></strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="alert alert-warning alert-dismissible fade show d-none" role="alert" name="warningMessageDiv">
                <strong name="warningMessage"></strong>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>--}}
            <form method="POST" id="feedbackBugForm" action="{{ route('send_message') }}" class="notifications">
                <input type="hidden" name="token" value="{{ $token }}"/>
                @csrf
            <p>
                {{ __('feedback.paragraph') }}
            </p>

            <div class="form-group question component-type-textbox bmd-form-group is-filled" id="contact-message-textarea-container">
                <div class="component optional"><label for="contact-message-textarea" class="component-label"></label>
                    <textarea name="message" class="form-control" style="border: solid 2px #2196f3; background-image: none" title="" rows="4" cols="50" data-next="" minlength="" maxlength="500" placeholder="" optional="" autocomplete="off"></textarea>
                    <div class="charNum">500</div>
                    <span class="invalid-feedback" role="alert" style="margin-top: -5px;">
                        <strong></strong>
                    </span>
                </div>
            </div>

            <div class="btn-group-toggle" data-toggle="buttons">
                <div class="form-group question component-type-segmented-options" id="">
                    <div class="component required">
                        <div class="segmented-options container">
                            <div class="row">
                                <div class="custom-control col-lg-6 p-0">
                                    <label class="btn btn-radio w-100 active">
                                        <input type="radio" name="type" id="hatchback" value="feedback" autocomplete="off" class="custom-control-input" checked>{{ __('feedback.inputLabelFeedback') }}
                                    </label>
                                </div>
                                <div class="custom-control col-lg-6 p-0">
                                    <label class="btn btn-radio w-100">
                                        <input type="radio" name="type" id="sedan" value="bug" class="custom-control-input" autocomplete="off">{{ __('feedback.inputLabelBugReport') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ReCaptcha --}}
            <div class="my-4">
                <div class="g-recaptcha" name="recaptcha" style="overflow-x: auto; overflow-y: hidden;" data-sitekey="6LcNV-QZAAAAAKFJgr0ylhG9WOLLwgmUJsufNyzQ"></div>
                <span class="invalid-feedback" role="alert">
                    <strong></strong>
                </span>
            </div>

            <button class="btn btn-primary w-100 fly-to-top" id="sendButton">
                {{ __('feedback.inputButtonSend') }}
                <div class="ripple-container"></div>
            </button>
            </form>
        </div>
    </div>
</div>
@endsection

@section('title')
{{ __('meta.title.feedback') }}
@endsection

@section('description')
{{ __('meta.description.feedback') }}
@endsection

@push('scripts')
<script>
$( document ).ready(function() {
    $('#sendButton').on('click',function (e) {
        e.preventDefault();

        var form = $('#feedbackBugForm'),
            formdata = new FormData(form[0]),
            type = form.attr('method'),
            url = form.attr('action');
            
        form_ajax({ 
            formId : 'feedbackBugForm', 
            responseCode422 : function (response) {
                if( ajaxDebug ) console.log('form_ajax 422: ',response);
                show_validation(form, response.responseJSON.errors)
            },
        });
    });
});
</script>
@endpush