@extends('board.layout-review')
@section("review-filter")
<div class="flex sb">
    <div class="selectWrap flex">
        <button type="button" data-list="option1">상품</button>
        <button type="button" data-list="option1">옵션</button>
        <button type="button" data-list="option2">추천 선생님</button>
    </div>
    <div class="writeBtnWrap pc-btn">
        <button type="button" class="writeBtn">후기 작성 <figure></figure></button>
    </div>
</div>

<div class="filter-bottom bottom-sheet type2 verChange">
    <form action="">
        <div class="slidingWrap">
            <button type="button" class="closeBtn"><span>닫기</span></button>
            <div class="optionArea" data-list="option1">
                <div class="category flex customLine">
                    <button type="button">상품</button>
                    <button type="button">옵션</button>
                </div>
                <div class="scrollArea">
                    <div class="scrollWidth">
                        <div class="scrollWrap">
                            <ul class="checkWrap">
                                @foreach ($products as $product)
                                <li><label><input type="checkbox" class="product_id" name="product_id[]" value="{{ $product->id }}" @checked(Request::has("product_id") && in_array($product->id, Request::get("product_id")))><span>{{ $product->name }}</span></label></li>
                                @endforeach
                            </ul>
                            <ul class="checkWrap">
                                @foreach ($options as $option)
                                <li><label><input type="checkbox" class="product_option_id" name="product_option_id[]" value="{{ $option->id }}" data-product-id="{{ $option->product_id }}" @checked(Request::has("product_option_id") && in_array($option->id, Request::get("product_option_id")))><span>{{ $option->name }}</span></label></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="optionArea noCategory" data-list="option2">
                <div class="scrollArea">
                    <div class="scrollWidth">
                        <div class="scrollWrap">
                            <ul class="checkWrap grid">
                                @foreach($teachers as $teacher)
                                <li><label><input type="checkbox" name="teacher_id[]" value="{{ $teacher->id }}" @checked(Request::has("teacher_id") && in_array($teacher->id, Request::get("teacher_id")))><span>{{ $teacher->name }}</span></label></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="buttonWrap flex sb">
                <button type="button" class="resetBtn">전체 초기화</button>
                <input type="submit" class="submitBtn" value="리뷰보기"></input>
            </div>
        </div>
    </form>

    <div class="dim"></div>
</div>

@endsection


@section("review-list")
    <x-board.class-wrap :posts="$posts" :classTimes="$classTimes" :difficulties="$difficulties" />
@endsection


@section("review-script")
<script>
    let products = [];
    $(function() {

        if ($('.product_id:checked').length > 0) {
            $.each($('.product_id:checked'), function() {
                products.push(Number($(this).val()));
            })

            onChangeDisabled();
        }

        $('.product_id').on("click", function() {
            const productId = Number($(this).val());
            if ($.inArray(productId, products) > -1) {
                products = products.filter(product => product != productId);
            } else {
                products.push(productId);
            }
            onChangeDisabled()
        })

        $(document).on("click", '#write-form .teacher_id',  function() {
            $.each($('#write-form .teacher_id'), function() {
                if (! $(this).is(":checked"))  {
                    $(this).prop("disabled", $('#write-form .teacher_id:checked').length >= 3);
                }
            })
        })

        $(document).on("click", '#write-form .option_id', function() {
            const enrollmentId = $(this).data("enrollment-id");

            $('#write-form .course_id').each(function() {
                $(this).closest(".optionItem").toggle($(this).data("enrollment-id") == enrollmentId);
            });

            const $courseBox = $('#write-form #courseBox');
            $courseBox.find(".label").text($courseBox.find(".label").data("default"));
            $courseBox.find("input[type=hidden]").val(0);

            $('#write-form #enrollment_id').val(enrollmentId);
        });
    })

    function onChangeDisabled() {
        $.each($('.product_option_id'), function() {
            const li = $(this).closest("li");
            if ( products.length == 0 ) {
                li.show();
            } else {
                if ($.inArray($(this).data("product-id"), products) > -1) {
                    li.show()
                } else {
                    $(this).prop("checked", false);
                    li.hide()
                }
            }
        })
    }

    function onResetFilter(category) {
        if (category == "option1") {
            products = [];
            onChangeDisabled();
        }
    }

    function getReviewFilter(filter) {
        return filter;
    }

    let exampleSwiper = null;
    function onEventWriteForm() {
        if ($('#write-form .option_id').length == 0) {
            const div = $('<div></div>').addClass("message").addClass("error").text("수강 상품이 없습니다");
            $('#write-form #product-wrap').append(div);
            $('#write-form .submitBtn').prop("disabled", true)
        }

        if (exampleSwiper != null) {
            exampleSwiper.destroy();
        }

        setTimeout(function() {
            exampleSwiper = new Swiper('#write-form .swiper', {
                direction: 'vertical',
                loop: true,
                autoplay: {
                    delay: 1000,
                    disableOnInteraction: false,
                },
                allowTouchMove: false,
                slidesPerView: 1,
                spaceBetween: 0
            });

        }, 1000)
    }


</script>


@endsection