@extends('layouts.profile')

@section('profile_content')

<h3 class="mt-5">{{ __('feedback.title') }}</h3>

<div class="alert alert-success alert-dismissible fade show d-none" role="alert" id="feedbackSuccessMessageDiv" 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('sendMessage', [ app()->getLocale(), ':slug'] ) }}" 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 #F58220; 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 offset-md-1" role="alert">
                <strong></strong>
            </span>
        </div>
    </div>

    <div class="btn-group-toggle" data-toggle="buttons">
        <div class="form-group question component-type-segmented-options" id="question-segmentedoption_8342">
            <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-secondary 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-secondary 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>

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

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

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

@push('scripts')
<script>
$( document ).ready(function() {
    var debug = false;

    $('#sendButton').on('click',function (e) {
        e.preventDefault();

        var form = $('#feedbackBugForm');
        hideSuccessFeedbackMessage();
        hideFeedbackValidation(form);
        url = form.attr('action');
        url = url.replace(':slug', $('input[name=type]:checked', '#feedbackBugForm').val());

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
        })
        .done( function(response) {
            console.log('done');
            if(debug == true) console.log(response);
            showSuccessFeedbackMessage();
        })
        .fail( function(error) {
            console.log('error');
            if(debug == true) console.log(error);
            showFeedbackValidation(form,error);
        });
    });
});

window.showSuccessFeedbackMessage = function( )
{
    $(document).find('[name=successMessageDiv]').removeClass('d-none');
    $('html, body').animate({
        scrollTop: $('#feedbackSuccessMessageDiv').offset().top,
    });
    $(document).find('[name=successMessage]').html("{{ __('feedback.sendMessageSuccessful') }}");
}

window.hideSuccessFeedbackMessage = function()
{
    $(document).find('[name=successMessageDiv]').addClass('d-none');
    $(document).find('[name=successMessage]').html('');
}

window.showFeedbackValidation = function(form, error)
{
    form.find('[name=message]').addClass('is-invalid');
    form.find('[name=message] + div + .invalid-feedback strong').html(error.responseJSON.error.message);
}

window.hideFeedbackValidation = function(form)
{
    form.find('.is-invalid + .invalid-feedback strong').html('');
    form.find('.is-invalid').removeClass('is-invalid');
}

</script>
@endpush