@extends("domains.common.layouts.layout-popup")

@section("header")
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>첨삭 요청</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
        첨삭을 진행합니다.<br>
        저장 시 첨삭 완료 처리되며 수강생이 확인 가능합니다.
    </p>
    <!-- 조회조건 -->
    <form action="" class="mb-3">
        <div class="popup-search-wrap search-form">
            <div class="search-input-wrap full">
                <div class="search-input-row">
                    <div class="input-wrapper">
                        <div class="fs1">
                            <strong>[{%등록일시%} 2023.11.01 23:59:59]</strong> <a href="#none">%이름%</a>
                        </div>
                    </div>
                    <div class="input-wrapper">
                        <label for="" class="form-label">메인 노출</label>
                        <!-- validation 항목 활성화시 active-val 클래스 추가 -->
                        <div class="">
                            <div class="form-check form-check-inline ">
                                <input type="radio" id="radio1" name="madin" class="form-check-input" value="1">
                                <label class="form-check-label" for="radio1">고정 안 함</label>
                            </div>
                            <div class="form-check form-check-inline ">
                                <input type="radio" id="radio2" name="main" class="form-check-input" value="0">
                                <label class="form-check-label" for="radio2">고정</label>
                            </div>
                        </div>
                    </div>
                    <div class="input-wrapper" style="flex:0;width:auto;">
                        <div class="fs1">
                            <strong>Writing</strong> <strong>CDT</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    <div class="pd-wrap">
        <div class="pd-con-wrap">
            <div class="pd-con">
                <!-- 구성항목 타이틀 -->
                <div class="user-btn-wrap">
                    첨삭 요청본
                </div>
                <!-- //구성항목 타이틀 -->
                <div class="text-center">
                    <img src="https://placehold.co/600x400" alt="">
                </div>
            </div>
        </div>

        <div class="pd-con-wrap">
            <div class="pd-con">
                <!-- 구성항목 타이틀 -->
                <div class="user-btn-wrap">
                    첨삭 및 평가
                </div>
                <!-- //구성항목 타이틀 -->
                <!-- writing CDT -->
                <div class="pd-con-row">
                    <div>
                        <div class="detail-input">
                        <dl class="input-wrapper">
                                <dt class="req">WT1 첨삭</dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt></dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">WT2 첨삭</dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt></dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>첨부된 파일이 없습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div>
                        <div class="detail-input type2">
                            <dl class="input-wrapper">
                                <dt class="req">Task<br>Achievement</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Cohesion & Coherence</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Lexical<br>Resources</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Grammatical Range & Accuracy</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Band Score</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>선택되지 않은 항목이 있습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <!-- //writing CDT -->
                <!-- writing Basic -->
                <div class="pd-con-row">
                    <div>
                        <div class="detail-input">
                        <dl class="input-wrapper">
                                <dt class="req">첨삭</dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt></dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>첨부된 파일이 없습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div>
                        <div class="detail-input type2">
                            <dl class="input-wrapper">
                                <dt class="req">Task<br>Achievement</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Cohesion & Coherence</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Lexical<br>Resources</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Grammatical Range & Accuracy</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Band Score</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>선택되지 않은 항목이 있습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <!-- //writing Basic -->
                <!-- writing Premium -->
                <div class="pd-con-row">
                    <div>
                        <div class="detail-input">
                        <dl class="input-wrapper">
                                <dt class="req">첨삭</dt>
                                <dd>
                                    <div class="input-flex">
                                        <input type="text" id="" class="form-control" name="" value="" placeholder="파일을 첨부해 주세요." readonly>
                                        <input type="button" class="button btn-style-1" value="찾기" onclick="">
                                        <input type="file" value="" id="file" hidden onchage="" name="file">
                                    </div>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>첨부된 파일이 없습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div>
                        <div class="detail-input type2">
                            <dl class="input-wrapper">
                                <dt class="req">Task<br>Achievement</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Cohesion & Coherence</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Lexical<br>Resources</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Grammatical Range & Accuracy</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Band Score</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>선택되지 않은 항목이 있습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <!-- //writing Premium -->
                <!-- speaking Basic -->
                <div class="pd-con-row">
                    <div>
                        <div class="detail-input">
                        <dl class="input-wrapper">
                                <dt class="req">Part2 첨삭</dt>
                                <dd>
                                    <textarea name="" id="" cols="30" rows="4" placeholder="첨삭 해설을 입력해 주세요."></textarea>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Part3 첨삭</dt>
                                <dd>
                                    <textarea name="" id="" cols="30" rows="4" placeholder="첨삭 해설을 입력해 주세요."></textarea>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>첨부된 파일이 없습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div>
                        <div class="detail-input type2">
                            <dl class="input-wrapper">
                                <dt class="req">Fluency<br>& Coherence</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Lexical<br>Resources</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Grammatical Range & Accuracy</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Pronunciation</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Band Score</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>선택되지 않은 항목이 있습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <!-- //speaking Basic -->
                <!-- speaking CDT -->
                <div class="pd-con-row">
                    <div>
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt class="req">Part1 첨삭</dt>
                                <dd>
                                    <textarea name="" id="" cols="30" rows="4" placeholder="첨삭 해설을 입력해 주세요."></textarea>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Part2 첨삭</dt>
                                <dd>
                                    <textarea name="" id="" cols="30" rows="4" placeholder="첨삭 해설을 입력해 주세요."></textarea>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Part3 첨삭</dt>
                                <dd>
                                    <textarea name="" id="" cols="30" rows="4" placeholder="첨삭 해설을 입력해 주세요."></textarea>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>첨부된 파일이 없습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div>
                        <div class="detail-input type2">
                            <dl class="input-wrapper">
                                <dt class="req">Fluency<br>& Coherence</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Lexical<br>Resources</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Grammatical Range & Accuracy</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Pronunciation</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">Band Score</dt>
                                <dd>
                                    <select name="" id="">
                                        <option value="">선택</option>
                                    </select>
                                </dd>
                                <dd class="validation-wrap">
                                    <p>선택되지 않은 항목이 있습니다.</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <!-- //speaking CDT -->
                <!-- <div class="validation-wrap">
                    <p>구성 예정 강의가 없습니다.</p>
                </div> -->
            </div>
        </div>
    </div>

    <form action="">
        <div class="comment-wrap">
            <div class="comment-con">
                <h2>
                    학습 문의 <span>99</span>건
                </h2>
                <div class="comment-textarea-wrap">
                    <textarea name="" id="" cols="30" rows="10" oninput="" value=""></textarea>
                    <button class="button btn-style-1" onclick="">등록</button>
                </div>
                <div class="comment-row">
                    <div class="user-comment">
                    <button class="user-comment-remove" onclick=""></button>
                        <div class="user-comment-img">
                            <img id="user_image" src="{{ Vite::asset('resources/images/no-photo.svg') }}" alt="" onerror="this.src='{{ Vite::asset('resources/images/no-photo.svg') }}';">
                        </div>
                        <div class="user-comment-profil">
                            <div class="user-comment-name">이름</div>
                            <p class="comment-date">날짜</p>
                        </div>
                    </div>
                    <p class="comment-text">
                        내용
                    </p>
                </div>
            </div>
        </div>
    </form>

    <div class="text-center">
        <button class="button btn-style-1" type="submit">확인</button>
    </div>
</div>
@endsection

@push("script")
<script>

    let selectTmp;

    window.addEventListener("load", () => {
        selectTmp = new TomSelect("#subjects", {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow"
            ],
            maxItems: null
        });
        let gridTmp1;
        let gridItems1 = [
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'L',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'R',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'WT1',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'WT2',
                mp3: "<a href='#none'>%파일명%</a>",
            },
            {
                date: "2023.04.06<br>00:06:15",
                name: "<a href='#none'>%CDT 문제명%</a>",
                subject: 'S',
                mp3: "<a href='#none'>%파일명%</a>",
            }
        ];

        gridTmp1 = new Grid({
            el: document.getElementById("grid1"),
            data: gridItems1,
            rowHeaders: [
                {
                    type: 'checkbox'
                }
            ],
            columns: [
                {
                    header: '번호',
                    name: 'row_num',
                    sortable: true,
                    width: 50,
                    align: 'center'
                },
                {
                    header: '등록일시',
                    name: 'date',
                    align: 'center',
                    width: 100
                },
                {
                    header: 'CDT 문제명',
                    name: 'name',
                    editor: 'text',
                },
                {
                    header: '과목',
                    name: 'subject',
                    align: 'center',
                    width: 80,
                },
                {
                    header: 'MP3 파일',
                    name: 'mp3',
                    width: 100,
                    align: 'center'
                },
            ],
            scrollX: false,
            scrollY: false,
        });

        gridTmp1.on('onGridMounted', ({ instance }) => {
            instance.getData().forEach(({rowKey}) => {
                instance.setValue(rowKey, 'row_num', rowKey + 1);
            });
        });
    });
</script>
@endpush