@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="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="{{ route("center.index", ['service' => $service]) }}" method="GET">
        <input type="hidden" name="paginate" id='paginate' value="{{ Request::get('paginate', 10) }}" />
        <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 grid">
                                @foreach($locations as $loc)
                                    <li><label><input type="checkbox" name="location[]" class="location" value="{{ $loc }}" @checked(Request::has("location") && in_array($loc, Request::get("location")))><span>{{ $loc }}</span></label></li>
                                @endforeach
                            </ul>
                            <ul class="checkWrap">
                                @foreach($centers as $center)
                                    <li><label><input type="checkbox" name="exam_venue_id[]" class="exam_venue_id" value="{{ $center->id }}" data-location="{{ $center->location }}"  @checked(Request::has("exam_venue_id") && in_array($center->id, Request::get("exam_venue_id")))><span>{{ $center->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">
                                <li><label><input type="checkbox" name="exam_type" value="CDT" @checked(Request::get("exam_type") == 'CDT')><span>CDT 시험장</span></label></li>
                                <li><label><input type="checkbox" name="exam_type" value="PBT" @checked(Request::get("exam_type") == 'PBT')><span>일반시험장</span></label></li>
                            </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.center-wrap :posts="$posts" />

@endsection


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

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

            onChangeDisabled();
        }

        $('.location').on("click", function() {
            const location = $(this).val();
            if ($.inArray(location, locations) > -1) {
                locations = locations.filter(loc => loc != location);
            } else {
                locations.push(location);
            }
            onChangeDisabled()
        })
    })

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

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

    function getReviewFilter(filter) {
        return filter;
    }

    /* 작성 폼 열렸을 때 사용하는 Script */
    function onEventWriteForm() {
        const today = new Date();
        const options = {
            maxDate : today
        }
        setDatePicker($("#exam_date"), options);
    }

    function onChangeDropbox(input) {
        if ( input.attr('name') == 'location') {
            const location = input.val();
            if ( location ) {
                $("#centerSelector button.label").attr("disabled", false);
                $.each($("#centerSelector .optionItem") , function() {
                    $(this).find('button').data('location') == location ?  $(this).show() : $(this).hide();
                })

                $("#centerSelector button.label").text($("#centerSelector button.label").data('default'));
                $("#centerSelector input").val(0)
            } else {
                $("#centerSelector button.label").attr("disabled", true);
            }

        }
    }
</script>


@endsection