@extends("board.layout.layout-board" )

@section("board-display")
<li class="mb-3 row mx-0 align-middle">
    <label class="col-2">기본 좋아요 수</label>
    <div class="col-3">
        <input type="text" name="default_like_cnt" value="{{ $post?->default_like_cnt }}" class="form-control number-only" />
    </div>
</li>
@endsection

@section("board-title-custom")
    @php
        $colorChips = [  "r" => "빨강", 'w' => "파랑", 's' => "초록", 'l' => "보라" ];
    @endphp
    <div class="d-flex align-center justify-content-between">

        <div id="title-form" class="d-flex align-center">
            <div>
                <textarea class="form-control" name="title" id="title" rows="5" style="width: 400px"> {{ $post?->title_html }}</textarea>
                <div class="mt-1 text-left">
                    @foreach ( $colorChips as $key => $color)
                        <span class="badge badge-secondary badge-select onAddTag {{ $key }}" data-key="{{ $key }}" style="font-size: 0.8rem">{{ $color }}</span>
                    @endforeach
                    <span class="badge badge-warning badge-icon onAddTag">
                        <i class="bi bi-arrow-return-left"></i>
                    </span>
                    <span class="badge badge-danger badge-icon onResetTitle">
                        <i class="bi bi-arrow-clockwise"></i>
                    </span>

                </div>
            </div>

            <div class="ml-3 text-left">
                <h5><i class="bi bi-image"></i> 미리보기</h5>
                <div id="title-preview" style="">{!! $post?->title_html !!}</div>
            </div>
        </div>

        <div class="ml-3 text-left">
            <div class="alert alert-danger">
                <h5>
                    <i class="bi bi-exclamation-triangle-fill"></i> 제목 작성 가이드</h5>
                <p class="mb-1">* 단어를 드래그하고 원하는 색상버튼을 클릭하면 선택한 단어에 색상이 적용됩니다. </p>
                <p class="mb-1">* 줄바꿈을 원하는 경우 <span class="badge badge-warning badge-icon"><i class="bi bi-arrow-return-left"></i></span> 아이콘을 클릭하세요.</p>
                <p class="mb-1">* 제목의 모든 스타일을 제거하고 싶다면 <span class="badge badge-danger badge-icon"><i class="bi bi-arrow-clockwise"></i></span> 아이콘을 클릭하세요.</p>
                <p class="mb-1">* 미리보기 영역에서 프론트에 제목이 어떻게 노출될지 확인하세요. (미리보기에서 노출되는 것과 동일하게 노출됩니다.) </p>
            </div>
        </div>

    </div>

@endsection

@section("board-content")
<li class="mb-3 row mx-0 align-middle">
    <label class="col-1">강사선택</label>
    <span class="col-2">
        <select name="teacher_id" id="teacher_id" class="form-select">
            @foreach ($teachers as $teacher)
                <option value="{{ $teacher->id }}" @selected($teacher->id == $post?->teacher_id) >{{ $teacher->name }}</option>
            @endforeach
        </select>
    </span>
</li>
<li class="mb-3 row mx-0 align-middle">
    <label class="col-1 required">자료구분</label>
    <div class="col-2">
        <select name="material_type" id="material_type" class="form-select">
            @foreach ($material_type as $type => $text)
                <option value="{{ $type }}" @selected($type == $post?->material_type )>{{ $text }}</option>
            @endforeach
        </select>

    </div>
</li>

@endsection

@push("script")
<script>
    $(function() {
        $('#thumbnail').on("change", function() {
            file = $(this).prop('files')[0];
            if (file) {
                if (file.type.indexOf('image') == -1) {
                    alertify.alert('error', '업로드할 수 없는 확장자입니다. <br>이미지 파일을 업로드해주세요');
                    return false;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview').attr('src', e.target.result);
                    $('#preview-box').show();
                }
                reader.readAsDataURL(file);
            } else {
                $('#preview').attr('src', "");
                $('#preview-box').hide();
            }
        })
    })

    $(function() {
        $('.onAddTag').on("click", function() {
            let startTag = endTag = '';
            if ($(this).data("key")) {
                startTag = "<span class='" + $(this).data("key") + "'>";
                endTag = "</span>";
            } else {
                startTag = "<br />"
            }


            const title = $('#title');

            const start = title[0].selectionStart;
            const end = title[0].selectionEnd;
            let inputValue = title.val();

            let newValue = inputValue + startTag + endTag;
            if (start !== end) {
                const selectedText = inputValue.substring(start, end);
                newValue =
                    inputValue.substring(0, start) +
                    startTag +
                    selectedText +
                    endTag +
                    inputValue.substring(end);

            } else if (start !== null && start !== undefined) {
                newValue =
                    inputValue.substring(0, start) +
                    startTag + endTag +
                    inputValue.substring(start);
            }

            title.val(newValue);
            title.trigger("keyup");
        })

        $('.onResetTitle').on("click", function() {
            let title = $('#title').val();
            title = title.replace(/<\/?[^>]*>/g, '');

            $('#title').val(title);
            $('#title').trigger("keyup");
        })

        $('#title').on("keyup", function() {
            $('#title-preview').html($(this).val());
        })

    })

</script>
@endpush