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

@routes(["product"])
@section("header-child")
@endsection

@section('custom-columns')
<div class="row">
    <div class="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>
                                        Overall
                                    </div>
                                    <div>
                                        <select name="goal_overall" id="goal_overall">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->goal_overall == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Listening
                                    </div>
                                    <div>
                                        <select name="goal_listening" id="goal_listening">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->goal_listening == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Reading
                                    </div>
                                    <div>
                                        <select name="goal_reading" id="goal_reading">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->goal_reading == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Writing
                                    </div>
                                    <div>
                                        <select name="goal_writing" id="goal_writing">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->goal_writing == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Speaking
                                    </div>
                                    <div>
                                        <select name="goal_speaking" id="goal_speaking">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->goal_speaking == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">합격 점수</dt>
                                <dd>
                                    <div>
                                        Overall
                                    </div>
                                    <div>
                                        <select name="pass_overall" id="pass_overall">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->pass_overall == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Listening
                                    </div>
                                    <div>
                                        <select name="pass_listening" id="pass_listening">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->pass_listening == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Reading
                                    </div>
                                    <div>
                                        <select name="pass_reading" id="pass_reading">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->pass_reading == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Writing
                                    </div>
                                    <div>
                                        <select name="pass_writing" id="pass_writing">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->pass_writing == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        Speaking
                                    </div>
                                    <div>
                                        <select name="pass_speaking" id="pass_speaking">
                                            <option value="">선택</option>
                                            @foreach ($scores as $score)
                                            <option value="{{ $score }}" @selected($post?->pass_speaking == $score)>{{ $score }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">달성 기간</dt>
                                <dd>
                                    <div>
                                        <select name="attainment_period" id="attainment_period">
                                            <option value="">선택</option>
                                            @foreach ($attainmentPeriods as $attainmentPeriod)
                                            <option value="{{ $attainmentPeriod }}" @selected($post?->attainment_period == $attainmentPeriod)>{{ $attainmentPeriod }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">시험응시일</dt>
                                <dd>
                                    <div>
                                        <input type="date" id="exam_date" name="exam_date" value="{{ explode(' ', $post?->exam_date ?? '')[0] }}">
                                    </div>
                                </dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">IELTS 공부 계기</dt>
                                <dd>
                                    <div>
                                        국가
                                    </div>
                                    <div>
                                        <select name="target_country_id" id="target_country_id">
                                            <option value="">선택</option>
                                            @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" @selected($post?->target_country_id == $country->id)>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="ml20">
                                        목적
                                    </div>
                                    <div>
                                        <select name="goal_id" id="goal_id" onchange="changeGoal(event)">
                                            <option value="">선택</option>
                                            @foreach ($goals as $goal)
                                            <option value="{{ $goal->id }}" @selected($post?->goal_id == $goal->id)>{{ $goal->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div>
                                        <input type="text" name="goal_description" id="goal_description" placeholder="기타 항목의 사유를 입력해주세요." value="{{ $post?->goal_description }}" @disabled($post?->goal->name != "기타")>
                                    </div>
                                </dd>
                                <dd class="validation-wrap"><p></p></dd>
                            </dl>
                            <dl class="input-wrapper">
                                <dt class="req">수강 상품</dt>
                                <dd>
                                    <div>
                                        <select name="product_id" id="product_id">
                                            <option value="">선택</option>
                                            @if ($post?->product)
                                            <option value="{{ $post->product->id }}" selected>{{ $post->product->name }}</option>
                                            @endif
                                        </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('grade_s3_key').click()">파일 첨부</button>
                                        <input type="file" class="hidden" name="grade_s3_key" id="grade_s3_key" onchange="changeGrade(event)">
                                    </div>
                                    <div class="detail-img mb-1 img-size2">
                                        <button class="btn-delete" type="button" onclick="deleteImage(event)">이미지 삭제</button>
                                        <img id="grade-img" name="grade-img" data-id="{{ $post?->grade_s3_key ? $post?->id : '' }}" alt="" src="{{ $post?->grade_s3_key ? app(\S3Helper::class)->getDownloadPresignedUrl($post?->grade_s3_key) : '' }}">
                                    </div>
                                    <div class="detail-img-notice">
                                        * 파일 형식 : jpg, jpeg, png
                                    </div>
                                    <dd class="validation-wrap"><p></p></dd>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push("script")
<script>
    let productIdTomSelect = null;

    window.addEventListener("load", () => {
        productIdTomSelect = new TomSelect("#product_id", {
            plugins: ["input_autogrow",],
            valueField: "id",
            labelField: "name",
            searchField: "name",
            maxItems: 1,
            load: (query, callback) => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.by-name'),
                    data: {
                        query: query,
                    },
                    callback: callback,
                    isBlock: false,
                });
            },
            onFocus: () => {
                edmAjax({
                    method: "GET",
                    url: route('api.product.by-name'),
                    data: {
                        count: 5
                    },
                    callback: response => {
                        productIdTomSelect.addOptions(response.data);
                        productIdTomSelect.open();
                    },
                    isBlock: false,
                });
            },
        });
    });

    function changeGoal(e) {
        const $TARGET = document.getElementById("goal_description");
        if (e.target.value == 6)
            $TARGET.disabled = false;
        else {
            $TARGET.value = "";
            $TARGET.disabled = true;
        }
    }

    function changeGrade(e) {
        const FILE = e.target.files[0];
        document.getElementById("grade-img").src = URL.createObjectURL(FILE);
        URL.revokeObjectURL(FILE);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        const $goal_id = document.getElementById("goal_id");
        const goal_id = $goal_id?.value;
        if (!goal_id)
            $validationWrap = displayValidationForm($goal_id, "입력된 내용이 없습니다.");
        else if (goal_id == 6) {
            const $goal_description = document.getElementById("goal_description");
            const goal_description = $goal_description?.value;
            if (!goal_description)
                $validationWrap = displayValidationForm($goal_description, "입력된 내용이 없습니다.");
        }


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

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

        return $validationWrap;
    }

    function getRequestBody(formData) {
        return formData;
    }

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