@extends('layouts.default', [
    'activatedNavItem' => 'INQUIRY',
])

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/inquiry.css?ver=20200715"/>
    <script type="text/javascript" src="/js/form.js?ver=20200716"></script>
@endpush

@section('content')
    <div class="container inquiry qna">
        <div class="area-pages-top">
            <h1 class="page-title">실시간Q&amp;A</h1>
            <div class="add-text">
                궁금한 사항을 남겨주세요<br>
                전문 컨설턴트가 24시간 이내 친절히 답변해드리겠습니다
            </div>
        </div>
        <div class="area-pages-content">
            <div class="flex-wrap">
                <form method="POST" name="form-create" action="{{ route('inquiry.qna.store') }}">
                    <input type="hidden" name="counsel_type" value="simple">
                    @csrf
                    <div class="area-inquiry-form">
                        <div class="input-wrap">
                            <div class="input">
                                <p class="tit"><label for="aif-qna-title">제목</label></p>
                                <p class="line-style">
                                    <input type="text" id="aif-qna-title" name="title" value="{{ old('title') }}" placeholder="제목을 입력하세요." class="line-style">
                                </p>
                            </div>
                            <div class="input-wrap">
                                <div class="input">
                                    <p class="tit"><label for="aif-country">유학국가</label></p>
                                    <div class="line-style">
                                        <select name="country">
                                            <option value="">선택하세요</option>
                                            @foreach ($countries as $val)
                                                <option value="{{$val->config_oldcode}}">{{$val->config_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="input">
                                    <p class="tit"><label for="aif-interest">관심분야</label></p>
                                    <div class="line-style">
                                        <select name="category">
                                            <option value="">선택하세요</option>
                                            @foreach ($uhaktypes as $val)
                                                <option value="{{$val->config_name}}">{{$val->config_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="input">
                                <p class="tit"><label for="aif-write">문의사항</label></p>
                                <div>
                                    <textarea id="aif-write" name="content">{{ old('content') }}</textarea>
                                </div>
                            </div>
                            <div class="button-wrap">
                                <button type="submit" class="button color wide">등록하기</button>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="area-promotion-qna">
                    <div class="aip-title">
                        지금 상담신청하고<br>
                        <strong>이 모든 <span class="text-point">혜택</span>  받으세요</strong>
                    </div>
                    <div class="aip-slide slide-simple-arr no-pager">
                        @contentManager('INQUIRY', 'QNA-BANNERS')
                        <div class="swiper-wrapper">
                            @foreach ($items = @contentItems('INQUIRY', 'QNA-BANNERS')->get() as $item)
                                <div class="swiper-slide">
                                    @contentItem(['item' => $item])
                                    @endcontentItem
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="swiper-controls">
                        <div class="swiper-controls-direction">
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            new Swiper('.area-promotion-qna .aip-slide', {
                loop: true,
                autoplay: true,
                slideClass: 'swiper-slide',
                slidesPerView: 1,
                navigation: {
                    prevEl: '.area-promotion-qna .swiper-button-prev',
                    nextEl: '.area-promotion-qna .swiper-button-next',
                },
            });

            $('.container.inquiry.qna form[name="form-create"]').submit(function() {

                var $form = $(this);
                var $error = null;

                $.ui_ajax({
                    ajax: {
                        method: $form.attr('method'),
                        url: $form.attr('action'),
                        data: $form.serialize()
                    },
                    dialog: {
                        text_process: '질문을 등록중입니다.<br/>잠시만 기다려 주세요.',
                        text_done: '질문 등록이 완료되었습니다.<br/>담당컨설턴트가 빠르게 답변 드리도록 하겠습니다.<br/><br/>감사합니다.',
                        text_fail: '질문 등록에 실패했습니다.',
                        done: function(data) {
                            $error = null;
                            if (data.url) {
                                window.location.href = data.url;
                            }
                        },
                        fail: function(jqXHR, textStatus, errorThrown) {
                            var response = jqXHR.responseJSON;
                            if (response) {
                                $error = response.errors;
                            }
                        },
                        close: function() {
                            if ($error) {
                                for (var key in $error) {
                                    $form.find('[name="' + key + '"]').focus();
                                    break;
                                }
                            }
                        }
                    }
                });

                return false;
            });
        });
    </script>
@endsection