@extends('module.layouts.content')

@push('meta')

@endpush

@push('css')
<link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ theme_asset('app/css/suggest/suggest.css') }}"/>
<style type="text/css">
.errinfo{
    margin-left:85px;
    width: 650px;
    line-height: 26px;
    color: #CC3300;
    background-color: #FFD8CE;
    border: 1px #FF9E86 solid;
    font-size: 12px;
    padding-left: 10px;
    margin-bottom: 15px;
    border-radius: 3px;
}
.display_none{display:none;    border: 0px #FF9E86 solid;}
</style>
@endpush

@push('js')
<script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
<script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
@endpush

@section('content')
    <div class="all_body">
        <div class="suggest_main">
            <form id="form_suggest" action="{{route('suggest.add')}}" method="post">
                <div class="suggest_head">您的建议让我们每天变的更好</div>
                <div class="top_tips">用户您好，请将您的意见、想法、建议或投诉内容告诉我们，以帮助我们为全体用户提供更加优质的服务。我们将在第一时间及时回复您的反馈，如您的问题比较紧急，请致电服务热线：0595-36776789。</div>
                <div class="suggest_list_group">
                    <div class="errinfo display_none" id="sugget_infotype_div"></div>
                    <div class="suggest_list_cell">
                        <div class="list_cell_left">意见类型</div>
                        <div class="list_cell_right">
                            <div class="suggest_type_cell"><div class="suggest_type selected" data-code="1">建议</div></div>
                            <div class="suggest_type_cell"><div class="suggest_type" data-code="2">意见</div></div>
                            <div class="suggest_type_cell"><div class="suggest_type" data-code="3">求助</div></div>
                            <div class="suggest_type_cell"><div class="suggest_type" data-code="4">投诉</div></div>
                            <div class="clear"></div>
                            <input type="hidden" name="infotype" value="1">
                        </div>
                        <div class="clear"></div>
                    </div>

                    <div class="errinfo display_none" id="sugget_tel_div"></div>
                    <div class="suggest_list_cell">
                        <div class="list_cell_left">联系方式</div>
                        <div class="list_cell_right"><input type="text" class="suggest_input" name="tel" placeholder="请输入您的QQ、邮箱或者电话以便和您沟通，您的信息仅工作人员可见！"></div>
                        <div class="clear"></div>
                    </div>

                    <div class="errinfo display_none" id="sugget_feedback_div"></div>
                    <div class="suggest_list_cell">
                        <div class="list_cell_left">反馈内容</div>
                        <div class="list_cell_right">
                            <textarea class="suggest_area" id="suggest_feedback" name="feedback" placeholder="请详细描述您遇到的问题，有助于我们快速定位并解决问题"></textarea>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="suggest_list_cell">
                        <div class="list_cell_left"></div>
                        <div class="list_cell_right">
                            <input type="hidden" id="J_suggest_verify" value="{{$varify_suggest}}" />
                            <input type="button" class="btn_yellow suggest_btn" id="J_suggest_submit" value="提 交">
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </form>

        </div>
    </div>

@endsection



@section('script')
    <script>
        // 意见类型切换
        $('.suggest_type').click(function(event) {
            $('.suggest_type').each(function(index, el) {
                $(this).removeClass('selected');
            });
            $(this).addClass('selected');
            $('input[name="infotype"]').val($(this).data('code'));
        });

        // 提交验证
        $('#J_suggest_submits').on('click', function(event) {
            var typeValue = $.trim($('input[name="infotype"]').val());
            var telValue = $.trim($('input[name="tel"]').val());
            var feedbackValue = $.trim($('#suggest_feedback').val());
            if (typeValue == "") {
                disapperTooltip("remind", "请选择意见类型");
                return false;
            }
            if (telValue == "") {
                disapperTooltip("remind", "请填写联系方式");
                return false;
            }
            if (telValue != "" && telValue.length > 30) {
                disapperTooltip("remind", "联系方式不能超出30个字");
                return false;
            }
            if (feedbackValue == "") {
                disapperTooltip("remind", "请填写反馈内容");
                return false;
            }
            if (feedbackValue != "" && feedbackValue.length > 80) {
                disapperTooltip("remind", "反馈内容不能超出80个字");
                return false;
            }
            if (!eval($('#J_suggest_verify').val())) {
                $('#J_suggest_submit').val('提 交 中...').addClass('btn_disabled').prop('disabled', !0);
                doSuggestFun();
            }
        });
        // 配置极验
        var gt_call_back=function(captchaObj) {
            captchaObj.onReady(function () {
                //极验加载完成
            });
            captchaObj.onSuccess(function () {
                $('#J_suggest_submit').val('提 交 中...').addClass('btn_disabled').prop('disabled', !0);
                doSuggestFun();

            });
            captchaObj.onError(function () {
                show_error(login_type,"请先进行验证");
            });
            captchaObj.onClose(function () {
                show_error(login_type,"请先进行验证");
            });
            $('#J_suggest_submit').on('click', function () {
                is_need_geetest = "{{$varify_suggest}}";
                if (is_need_geetest==1){
                    captchaObj.bindForm("#form_suggest");

                    var typeValue = $.trim($('input[name="infotype"]').val());
                    var telValue = $.trim($('input[name="tel"]').val());
                    var feedbackValue = $.trim($('#suggest_feedback').val());
                    if (typeValue == "") {
                        disapperTooltip("remind", "请选择意见类型");
                        return false;
                    }
                    if (telValue == "") {
                        disapperTooltip("remind", "请填写联系方式");
                        return false;
                    }
                    if (telValue != "" && telValue.length > 30) {
                        disapperTooltip("remind", "联系方式不能超出30个字");
                        return false;
                    }
                    if (feedbackValue == "") {
                        disapperTooltip("remind", "请填写反馈内容");
                        return false;
                    }
                    if (feedbackValue != "" && feedbackValue.length > 80) {
                        disapperTooltip("remind", "反馈内容不能超出80个字");
                        return false;
                    }
                    if (eval($('#J_suggest_verify').val())) {
                        captchaObj.verify();
                    }

                }
                else{
                    $('#J_suggest_submit').val('提 交 中...').addClass('btn_disabled').prop('disabled', !0);
                    doSuggestFun();
                }

            });
        };

        if (eval($('#J_suggest_verify').val())) {
            gt_init(gt_call_back);//初始化极验
        }


        // 提交
        function doSuggestFun() {
            var typeValue = $.trim($('input[name="infotype"]').val());
            var telValue = $.trim($('input[name="tel"]').val());
            var feedbackValue = $.trim($('#suggest_feedback').val());
            // 提交表单
            $.post("{{route('suggest.add')}}", {infotype: typeValue, tel: telValue, feedback: feedbackValue, '_token': '{{ csrf_token() }}'}, function (data) {
                disapperTooltip("success", data.msg);
                $('#sugget_tel_div,#sugget_infotype_div,#sugget_feedback_div').text('').addClass('display_none');
                if (parseInt(data.status)) {
                    setTimeout(function () {
                        window.location.reload();
                    }, 2000);
                } else {
                    $('#J_suggest_submit').val('提 交').removeClass('btn_disabled').prop('disabled', 0);
                    disapperTooltip("remind", data.msg);
                }
            }).fail(function(result) {
                if(result.status == 422){ //显示验证错误信息
                    var errors = result.responseJSON.errors;
                    $.each(errors,function(key,val){
                        var error_html =val.join("，");
                        $('#sugget_'+key+'_div').text(error_html);
                        $('#sugget_'+key+'_div').removeClass('display_none');
                    });
                }else{
                    disapperTooltip("remind", "提交失败，请稍后重试");
                }
                $('#J_suggest_submit').val('提 交').removeClass('btn_disabled').prop('disabled', 0);
            });
        }
    </script>
@endsection