@extends("common.layout")

{{-- @section('page-title', $page_title) --}}

@section("header")
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
{!! resource('js/common/tomSelectAllCheck.js') !!}
@endsection

@section("content")
<h1>
    <a href="{{ route('product.compare.list') }}" class="mr-3">
        <i class="bi bi-arrow-left-circle"></i>
        수강비교 팝업
    </a>

</h1>

@if ( $id == 0 )
<section>
    <header>옵션불러오기</header>
    <main>
         <form class="search-form">

            <div class="search-input-wrap chosen">
                <div class="input-group input-group-sm">

                    <select name="product_option_id" class="form-select form-select-sm" id="optionId">
                        @foreach ( $productOptions as $productOption )
                            <option value="{{ $productOption->id }}">{{ $productOption->product->name }} {{ $productOption->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <button class="btn btn-sm btn-outline-dark search-button" onclick="onSearchProduct()" type="button">조회</button>
        </form>
    </main>
</section>
@endif

<section class="mt-3" id="popup-form" style="{{ $id == 0 ? "display: none" : "" }}">
    <header>정보</header>
    <main>
        <form class="search-form">
            <input type="hidden" name="id" value="{{ $compare?->id }}" class="" />
            <input type="hidden" name="product_id" value="" class="" />
            <input type="hidden" name="product_option_id" value="" class="" />
            <ul class="list-item-none col-8">
                <li class="list-item">
                    <label>상품명</label>
                    <div class="item-content">
                        <input type="text" name="title" value="{{ $compare?->title }}" class="form-control" />
                    </div>
                </li>
                <li class="list-item">
                    <label>아이콘</label>
                    <div class="item-content">
                        @php
                            $icons = $compare?->icon ? json_decode($compare?->icon, 1) : [];
                        @endphp
                        <div class="form-check">
                            <input type="checkbox" id="icon1" name="icon" class="form-check-input" value="refund" @checked(! empty($icons) && in_array( 'refund', $icons))>
                            <label class="form-check-label" for="icon1">환급</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="icon2" name="icon" class="form-check-input" value="ticket" @checked(! empty($icons) && in_array('ticket', $icons))>
                            <label class="form-check-label" for="icon2">응시권</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="icon3" name="icon" class="form-check-input" value="cdt" @checked(! empty($icons) && in_array('cdt', $icons))>
                            <label class="form-check-label" for="icon3">CDT 모의고사</label>
                        </div>
                    </div>
                </li>
                <li class="list-item">
                    <label>옵션구성</label>
                    <div class="item-content">
                        <textarea type="text" rows=3 name="options" class="form-control">{{ $compare?->options }}</textarea>
                    </div>
                </li>
                <li class="list-item">
                    <label>강좌구성</label>
                    <div class="item-content">
                        <textarea rows=10 name="courses" class="form-control">{{ $compare?->courses }}</textarea>
                    </div>
                </li>
                <li class="list-item">
                    <label>강의수</label>
                    <div class="item-content">
                        <div class="col-4 mr-3">
                            <label>(A)</label> <input type="number" name="academic_lecture" value="{{ $compare?->academic_lecture }}" class="form-control" />
                        </div>
                        <div class="col-4">
                            <label>(G)</label> <input type="number" name="general_lecture" value="{{ $compare?->general_lecture }}" class="form-control" />
                        </div>
                    </div>
                </li>
                <li class="list-item">
                    <label>첨삭</label>
                    <div class="item-content">
                        <input type="text" name="feedback" value="{{ $compare?->feedback }}" class="form-control" />
                    </div>
                </li>
                <li class="list-item">
                    <label>CDT</label>
                    <div class="item-content">
                        <input type="text" name="cdt" value="{{ $compare?->cdt }}" class="form-control" />
                    </div>
                </li>
                <li class="list-item">
                    <label>학습자료(교재)</label>
                    <div class="item-content">
                        <textarea rows=3 name="textbooks" class="form-control">{{ $compare?->textbooks }}</textarea>
                    </div>
                </li>
                <li class="list-item">
                    <label>수강기간</label>
                    <div class="item-content">
                        <input type="text" name="period" value="{{ $compare?->period }}" class="form-control" />
                    </div>
                </li>
                 <li class="list-item">
                    <label>수강대상</label>
                    <div class="item-content">
                        <textarea rows=7 name="target" class="form-control">{{ $compare?->target }}</textarea>
                    </div>
                </li>
                <li class="list-item">
                    <label>수강료</label>
                    <div class="item-content">
                        <input type="text" name="price" value="{{ $compare?->price }}" class="form-control" />
                    </div>
                </li>
            </ul>
        </form>
    </main>
    <footer>
        <button class="btn btn-primary" type="button" onclick="onSubmitCompare()">저장</button>
    </footer>
</section>


@endsection

@push("script")
<script>
    $(function( ) {
        $("#optionId").chosen({
            width: "100%",
            no_results_text: "검색 결과가 없습니다: ",
            placeholder_text_single: "상품을 선택하세요",
            search_contains: true
        });

        $("#optionId").on('change', function() {
            if($(this).val()) {
                onSearchProduct();
            }
        });
    })

    async function onSearchProduct() {
        const id = $('#optionId option:selected').val()
        const href = "{{ route('api.product.compare.summary', ['id' => ':id']) }}";
        const result = await customFetch(href.replace(":id", id));

        if ( result.status) {
            $('#popup-form').show();
            $.each(result.info, function(key) {
                const item = result.info[key];
                if (key == "icon") {
                    $.each(item, function(index)  {
                        $('#popup-form input[name=icon][value='+item[index]+']').prop("checked", true)
                    })
                } else if ( key == 'courses' || key == 'textbooks' || key == 'options') {
                    const text = $.isArray(item) ? item.join("\n") : item;
                    $('#popup-form textarea[name=' + key + "]").val(text);
                } else {
                    $('#popup-form input[name=' + key + "]").val(item);
                }

            })
        }
    }

    async function onSubmitCompare() {
        const params = {};
        $.each($('#popup-form input, #popup-form textarea'), function() {
            const key = $(this).attr('name');
            let value = $(this).val();
            if ( $(this).attr('type') == 'checkbox' ) {
                const item = [];
                $.each($('input[name='+ key +']:checked'), function() {
                    item.push($(this).val());
                })
                value = item;
            }

            params[key] = value;
        });

        alertify.confirm("알림", "저장하시겠습니까? ", async () => {
            const result = await customFetch("{{ route('api.product.compare.modify') }}", {
                method: "POST",
                body : JSON.stringify(params) ,
                headers: { "Content-Type" : "application/json"}
            });

            if (result.status) {
                alertify.alert("완료", "저장되었습니다.", () => {
                    location.href="/products/compare/detail/" + result.id;
                });
            } else {
                alertify.alert("error", result.message);
            }
        }, () => {});
    }

</script>
@endpush