@extends("common.layout-popup")

@section("header")
{!! resource('js/product/add-option-type.js') !!}
{!! resource('js/components/multiSelect.js') !!}
{!! resource('css/components/multiSelect.css') !!}
@endsection

@section("page-title", "합격후기 추가 ")

@section("content")

<section class="mb-3">
    <main>
        <div class="alert alert-warning">
            * 이미 상품에 추가되어 있는 합격후기는 노출되지 않습니다.
        </div>
        <form method="post" id="search-form" class="search-form" action="{{ route("board.popup.product-review", [$targetId]) }}">
            <input type="hidden" name="paginate" value="{{ Request::has("paginate") ? Request::get("paginate"):'' }}">
            <input type="hidden" name="page" value="{{ Request::has("page") ? Request::get("page"):'' }}">
            <input type="hidden" name="order_by" value="{{ Request::has("order_by") ? Request::get("order_by"):'' }}">
            <input type="hidden" name="sort" value="{{ Request::has("sort") ? Request::get("sort"):'' }}">

            <input type="hidden" name="service" value="{{ $service }}">
            <input type="hidden" name="gridType" value="{{ $gridType }}">
            <input type="hidden" name="targetId" value="{{ $targetId }}">
            <input type="hidden" name="removeIds" value="{{ $removeIds }}">

            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="overall">합격점수</label>
                    <x:board.grade name="overall" isSearch="1" />
                </div>
            </div>

            <div class="input-group input-group-sm">
                <label class="input-group-text" for="periods">달성기간</label>
                <select name="period" id="period" class="form-select" multiple>
                    @foreach ($periods as $key => $name)
                        <option value="{{ $name }}"
                        @selected(Request::get('period') && in_array($name, Request::get('period')))>{{ $name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="input-group input-group-sm">
                <label class="input-group-text" for="country">목적국가</label>
                <select name="country_id" id="country_id" class="form-select">
                    <option @selected(empty(Request::get("country_id"))) value="0">전체</option>
                    @foreach ($countries as $country)
                        <option value="{{ $country->id }}"
                            @selected(Request::get('country_id') == $country->id)>{{ $country->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="input-group input-group-sm">
                <label class="input-group-text" for="goal">목적</label>
                <select name="goal_description" id="goal_description" class="form-select">
                    <option @selected(empty(Request::get("goal_description")))  value="">전체</option>
                    @foreach ($goals as $name)
                        <option value="{{ $name }}"
                            @selected(Request::get('goal_description') == $name)>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="input-group input-group-sm">
                <label class="input-group-text" for="name">작성자</label>
                <input class="form-control" type="text" name="writer" id='writer' value="{{ Request::get("writer") }}">
            </div>
            <button type="submit" class="btn btn-sm btn-outline-dark search-button" id="search-button" onclick="getGrid()"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>

<div class="search-result-wrapper" id="listGrid">
    @include('board.popups.pass-review-grid', ['checkable' => true])
</div>

<div class="selector-buttons">
    <button id="btn-append" class="btn btn-info" type="button" onclick="appendSelectedRow()" disabled>선택 항목 추가 <i class="bi bi-arrow-bar-down"></i></button>
</div>

<div class="search-result-wrapper" id="addListGrid">
    @include('board.popups.pass-review-grid', ['pending' => true, 'posts' => []])
</div>

<div class="selector-buttons">
    <button id="btn-remove" class="btn btn-outline-danger" type="button" onclick="removeSelected()" disabled>선택 항목 삭제</button>
    <button id="btn-apply" class="btn btn-success" type="button" onclick="callOpenerMethodWithGrid('{{ $gridType }}', '{{ $targetId }}')" disabled>항목을 선택하세요</button>
</div>

@endsection

@push("script")
<script>
    $(document).ready(function() {
        //fitWindowHeight();

        const selector = {};
        if ($("select[multiple]").length > 0 ) {
            $.each($("select[multiple]"), function() {
                if (! $(this).data("custom")) {
                    const id = $(this).attr('id');
                    selector[id] = new MultiSelector(id);
                }
            })
        }
        $('#search-form').on('submit', function(e){
            e.preventDefault();
            getGrid();
        });

        $(document).on("click", ".onShowReview", function() {
            $(this).closest('.review-wrap').addClass("active")
        })
        $(document).on("click", ".onHideReview", function() {
            $(this).closest('.review-wrap').removeClass("active")
        })
    });

    function getGrid(page) {
        if (page) $('input[name="page"]').val(page);
        let formData = $('#search-form').serialize();
        getListData($('#search-form').attr("action"), formData);
    }
</script>
@endpush