@extends("domains.board.layout.post-detail-layout")

@section("header-child")
@endsection

@section('custom-columns')
<div class="row detail-con-wrap">
    <div class="detail-con card">
        <form action="" class="set-user-form" >
            <div class="card-body">
                <div class="flex-box">
                    <div class="w100">
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt class="req">시험응시일</dt>
                                <dd>
                                    <div>
                                        <input id="exam_date" name="exam_date" type="date" value="{{ explode(' ', $post?->exam_date ?? [])[0] ?? '' }}">
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">시험 구분</dt>
                                <dd>
                                    <div class="form-check form-check-inline ">
                                        <input type="radio" id="exam_type0" name="exam_type" class="form-check-input" value="PBT 시험" @checked($post?->exam_type == "PBT 시험")>
                                        <label class="form-check-label" for="exam_type0">PBT 시험</label>
                                    </div>
                                    <div class="form-check form-check-inline ">
                                        <input type="radio" id="exam_type1" name="exam_type" class="form-check-input" value="CDT 시험" @checked($post?->exam_type == "CDT 시험")>
                                        <label class="form-check-label" for="exam_type1">CDT 시험</label>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">응시한 시험장</dt>
                                <dd>
                                    <div class="long-input">
                                        <select name="exam_venue_id" id="exam_venue_id">
                                            <option value="">선택</option>
                                            @foreach ($examVenues as $examVenue)
                                            <option value="{{ $examVenue->id }}" @selected($post?->exam_venue_id == $examVenue->id)>{{ $examVenue->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">접수증 이미지</dt>
                                <dd class="detail-img-wrap">
                                    <div>
                                        <button type="button" class="button btn-style-8" onclick="document.getElementById('receipt_s3_key').click()">파일 첨부</button>
                                        <input type="file" class="hidden" name="receipt_s3_key" id="receipt_s3_key" onchange="changeReceipt(event)">
                                    </div>
                                    <div class="detail-img mb-1 img-size2">
                                        <button class="btn-delete" type="button" onclick="deleteImage(event)">이미지 삭제</button>
                                        <img id="receipt-img" name="receipt-img" data-id="{{ $post?->receipt_s3_key ? $post?->id : '' }}" alt="" src="{{ $post?->receipt_s3_key ? app(\S3Helper::class)->getDownloadPresignedUrl($post?->receipt_s3_key) : '' }}">
                                    </div>
                                    <div class="detail-img-notice">
                                        * 파일 형식 : jpg, jpeg, png
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="detail-con card">
        <form action="" class="set-user-form" >
            <div class="card-body">
                <div class="flex-box">
                    <div class="w100">
                        <div class="detail-input">
                            <dl class="input-wrapper">
                                <dt class="req">시험장 평가</dt>
                                <dd>
                                    <div class="validation-wrapper">
                                        <dl class="rate-wrapper">
                                            <dt>
                                                접근성
                                            </dt>
                                            <dd>
                                                <div class="rate">
                                                    @foreach ($ratings as $key => $rating)
                                                    <input type="radio" id="accessibility-rating{{ 10 - $key }}" name="review_accessibility" value="{{ 10 - $key }}" @checked((10 - $post?->examVenueReviewDetails->firstWhere("review_type", "accessibility")?->rating) == $key)/>
                                                    <label @class(['half' => $key % 2 == 1]) for="accessibility-rating{{ 10 - $key }}" title="{{ 10 - $key }} stars"></label>
                                                    @endforeach
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="rate-wrapper">
                                            <dt>
                                                시설
                                            </dt>
                                            <dd>
                                                <div class="rate">
                                                    @foreach ($ratings as $key => $rating)
                                                    <input type="radio" id="facility-rating{{ 10 - $key }}" name="review_facility" value="{{ 10 - $key }}" @checked((10 - $post?->examVenueReviewDetails->firstWhere("review_type", "facility")?->rating) == $key)/>
                                                    <label @class(['half' => $key % 2 == 1]) for="facility-rating{{ 10 - $key }}" title="{{ 10 - $key }} stars"></label>
                                                    @endforeach
                                                </div>
                                            </dd>
                                        </dl>
                                        <dl class="rate-wrapper">
                                            <dt>
                                                음향상태
                                            </dt>
                                            <dd>
                                                <div class="rate">
                                                    @foreach ($ratings as $key => $rating)
                                                    <input type="radio" id="sound-rating{{ 10 - $key }}" name="review_sound" value="{{ 10 - $key }}" @checked((10 - $post?->examVenueReviewDetails->firstWhere("review_type", "sound")?->rating) == $key)/>
                                                    <label @class(['half' => $key % 2 == 1]) for="sound-rating{{ 10 - $key }}" title="{{ 10 - $key }} stars"></label>
                                                    @endforeach
                                                </div>
                                            </dd>
                                        </dl>
                                        <dd class="validation-wrap"><p></p></dd>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push("script")
<script>
    window.addEventListener("load", () => {

    });

    async function validate() {
        let $validationWrap = null;

        const $examDate = document.getElementById("exam_date");
        if (!$examDate?.value)
            $validationWrap = displayValidationForm($examDate, "입력된 내용이 없습니다.");

        const $examType = document.querySelector("input[name='exam_type']:checked");
        const examType = $examType?.value;
        if (!examType)
            $validationWrap = displayValidationForm(document.querySelector("input[name='exam_type']"), "입력된 내용이 없습니다.");

        const $exam_venue_id = document.getElementById("exam_venue_id");
        if (!$exam_venue_id?.value)
            $validationWrap = displayValidationForm($exam_venue_id, "입력된 내용이 없습니다.");

        const $receipt_s3_key = document.getElementById("receipt_s3_key");
        const $receipt_img = document.getElementById("receipt-img");
        const receipt_s3_key = $receipt_s3_key?.value;
        if (!receipt_s3_key && !$receipt_img.currentSrc)
            $validationWrap = displayValidationForm($receipt_s3_key, "입력된 내용이 없습니다.");

        const $review_accessibility = document.querySelector("input[name='review_accessibility']:checked");
        const review_accessibility = $review_accessibility?.value;
        if (!review_accessibility)
            $validationWrap = displayValidationForm(document.querySelector("input[name='review_accessibility']"), "입력된 내용이 없습니다.", "div.validation-wrapper");

        const $review_facility = document.querySelector("input[name='review_facility']:checked");
        const review_facility = $review_facility?.value;
        if (!review_facility)
            $validationWrap = displayValidationForm(document.querySelector("input[name='review_facility']"), "입력된 내용이 없습니다.");

        const $review_sound = document.querySelector("input[name='review_sound']:checked");
        const review_sound = $review_sound?.value;
        if (!review_sound)
            $validationWrap = displayValidationForm(document.querySelector("input[name='review_sound']"), "입력된 내용이 없습니다.");

        return $validationWrap;
    }

    function getRequestBody(formData) {
        formData.append("review_accessibility", document.querySelector("input[name='review_accessibility']:checked").value);
        formData.append("review_facility", document.querySelector("input[name='review_facility']:checked").value);
        formData.append("review_sound", document.querySelector("input[name='review_sound']:checked").value);
        return formData;
    }

    async function deleteImage(e) {
        const $image = e.target.nextElementSibling;
        const thumbnailId = $image.dataset?.id;
        if (!POST?.id || !thumbnailId) {
            $image.src = '';
            document.getElementById("receipt_s3_key").value = null;
        }
        else {
            if (await alertifyAsync("알림", "성적표 이미지를 삭제하시겠습니까?")) {
                const targetUrl = route("api.board.delete-receipt", {boardId: BOARD.id, postId: POST.id});
                edmAjax({
                    method: "delete",
                    url: targetUrl,
                    callback: response => location.reload(),
                });
            }
        }
    }

    function changeReceipt(e) {
        const FILE = e.target.files[0];
        document.getElementById("receipt-img").src = URL.createObjectURL(FILE);
        URL.revokeObjectURL(FILE);
    }
</script>
@endpush