@extends($service.'.layout')

@section($service.'-css')
    {!! resource('css/'.$service.'/sub.css') !!}

    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_'.$service.'.css') !!}
    {!! resource('css/common/nice-select-mo.css') !!}
@endsection


@php
    $content = $post?->content;

@endphp
@section($service."-content")
    <div class="container_m">

        <div id="nav">
            <a href="#none" onclick="history.back();" class="ico-back">뒤로가기</a>
            <h2>1:1 학습문의</h2>
        </div>
        <div id="btn">
            <a href="#none" class="btn-write " id="btnSubmit" onClick="onSubmit();" >등록</a>
        </div>
        <form action="" class="w100p" enctype="multipart/form-data" id="studyForm">
            @if ($post)
                <input type="hidden" name="id" value="{{ $post?->id }}" />
            @endif
        <div id="container" class="bg-gray">
            <div class="filter">
                <select class="select-option wide" name="enrollment_course_id" id="course_id" required>
                    @if (! $post)
                        <option value="" disabled selected>수강 중인 강좌를 선택해 주세요.</option>
                    @endif
                    @foreach ($courses as $course)
                        <option value="{{ $course['id'] }}" @selected($post?->enrollment_course_id == $course['id'])>{{ $course['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <input type="text" name="title" id="title" placeholder="제목을 입력해주세요." value="{{ $content?->title }}">
            <textarea name="content" id="content" placeholder="내용을 입력해주세요." class="w100txt">{{ $content ?  $content->content : $board['template'] }}</textarea>
            <x-board.attachments-mobile :files="$post?->getAttachments()" isPreview="{{ false }}" isView="{{ false }}" max="5" />
        </div>
        </form>
    </div>
@endsection



@section($service.'-script')
    {!! resource('js/common/board/default.js') !!}
    {!! resource('js/common/board/file-upload-mobile.js') !!}
    {!! resource('js/common/jquery.nice-select-mo.js') !!}
    <script>
        const fileUploadType = 'text';
        $(document).ready(function () {
            $('.select-option').niceSelect();
            // textarea 내용 늘어나게
            $(document).on("keypress", "textarea", function (e) {
                var height = $(this).css("height");
                var iScrollHeight = $(this).prop("scrollHeight");
                $(this).css('height',iScrollHeight);
            });
        });


        $(function() {
            validation();

            $('#course_id').on("change", function() {
                validation()
            });

            $('#title, #content').on("keyup", function() {
                validation();
            })
        })

        function validation() {
            const isValid = ! $.isEmptyObject($('#title').val()) && ! $.isEmptyObject($('#course_id').val()) && ! $.isEmptyObject($('#content').val())

            $('#btnSubmit').prop("disabled", ! isValid);
            isValid ? $('#btnSubmit').addClass("on") : $('#btnSubmit').removeClass("on");


            return isValid;
        }

        async function onSubmit() {
            if(!$("#btnSubmit").hasClass('on')){
                return;
            }
            const formData = setFileFormData(new FormData(document.getElementById("studyForm")));

            const result = await useFetch('{{ route("classroom.study.store", ["service" => $service ]) }}', {
                method: 'POST',
                body: formData,
            });

            if (result.status) {
                alertPopup("학습문의가 {{ $post ? '변경되었습니다.' : '작성되었습니다.' }}", {
                    onConfirm: function() {
                        location.href = '{{ route("classroom.study.index", ["service" => $service ]) }}'
                    },
                    onClose: function() {
                        location.href = '{{ route("classroom.study.index", ["service" => $service ]) }}'
                    },
                })
            }
        }
    </script>
@endsection