@extends("common.layout-popup")

@section("page-title", "[결제관리] 상품검색")

@section("content")
    <div class="alert alert-warning text-danger font-weight-600">* 회원이 이미 수강중인 상품은 목록에서 비노출됩니다</div>
    <section class="mb-3">
        <main>
            <form method="get" class="search-form" id="user-form" action="{{ route('payment.popup-product') }}">
                @csrf
                <input type="hidden" name="paginate" value="{{ Request::get('paginate') }}" />
                <input type="hidden" name="service" value="{{ Request::get('service') }}" />
                <input type="hidden" name="user_id" value="{{ Request::get('user_id') }}" />

                <div class="search-input-wrap">
                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="visible">접수싱태</label>
                        <div class="form-control">
                            <input type="radio" name="is_sellable" value="all" class="form-check-input" @checked( Request::get("is_sellable") == "all" ) /> 전체

                            <input type="radio" name="is_sellable" value="1" class="form-check-input" @checked( empty(Request::get("is_sellable")) || Request::get("is_sellable") == "1" ) /> 판매중

                            <input type="radio" name="is_sellable" value="0" class="form-check-input" @checked( Request::get("is_sellable") === "0" ) /> 마감
                        </div>
                    </div>

                    <div class="input-group input-group-sm">
                        <label class="input-group-text" for="module_id">모듈</label>
                        <div class="form-control">
                            <input type="radio" name="module" value="" class="form-check-input" @checked( empty(Request::get("module")) ) /> 전체

                            @foreach($modules as $module)
                                <input type="radio" name="module" value="{{ $module }}" class="form-check-input"
                                    @checked(Request::get("module") == $module ) /> {{ $module }}
                            @endforeach
                        </div>
                    </div>

                    <div class="input-group input-group-sm">
                        <label class="input-group-text">상품번호</label>
                        <input type="text" name="product_id" value="{{ Request::get("id") }}" class="form-control" />
                    </div>

                    <div class="input-group input-group-sm">
                        <label class="input-group-text">카테고리</label>
                        <select name="category_id" class="form-select">
                            <option value=""">전체</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" @selected(Request::get("category_id") == $category->id)>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="input-group input-group-sm">
                        <label class="input-group-text">상품/옵션</label>
                        <select name="field" class="form-select">
                            <option value="names" @selected(Request::get('field', 'names') == 'names')>전체</option>
                            <option value="productName" @selected(Request::get('field', 'names') == 'productName')>상품</option>
                            <option value="name" @selected(Request::get('field', 'names') == 'name')>옵션</option>
                        </select>
                        <input type="text" name="keyword" value="{{ Request::get("keyword") }}" class="form-control" />
                    </div>
                </div>

                <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
            </form>
        </main>
    </section>

    <section>
        <header>
            <h6>조회결과 <strong>{{ $list ? $list->total() : 0 }}</strong>건, 선택된 옵션 <strong id="option_cnt">0</strong>건</h6>
        </header>
        <main class="limit-height p-0 m-3" style="--height: 650px">
            <table class="table table-striped table-hover table-sticky">
                <colgroup>
                    <col width="3%">
                    <col width="7%">
                    <col width="7%">
                    <col width="13%">
                    <col width="/">
                    <col width="/">
                    <col width="10%">
                    <col width="10%">
                    <col width="5%">
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" id="all_check" class="form-check-input" />
                        </th>
                        <th>상품번호</th>
                        <th>판매여부</th>
                        <th>카테고리</th>
                        <th>상품명</th>
                        <th>옵션명</th>
                        <th>핀매가</th>
                        <th>소비자가</th>
                        <th>모듈</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($list as $item)
                    <tr>
                        <td>
                            <input type="checkbox" name="product_option_id" class="product_option_id" value="{{ $item->id }}" class="form-check-input" />
                        </td>
                        <td class="product_id">{{ $item->product_id }}</td>
                        <td>{{ $item->product->is_sellable == 1 ? "판매중" : "마감" }}</td>
                        <td class="category_name">{{ isset($item->product->productCategories[0]) ? $item->product->productCategories[0]->name : '' }}</td>
                        <td class="product_name">{{ $item->product->name }}</td>
                        <td class="option_name">{{ $item->name }}</td>
                        <td>
                            <input type="hidden" name="sales_price" class="sales_price price" value="{{ $item->sales_price }}" />
                            {{ number_format($item->sales_price) }}
                        </td>
                        <td>
                            <input type="hidden" name="customer_price" class="product_price customer_price" value="{{ $item->consumer_price }}" />
                            {{ number_format($item->consumer_price) }}
                        </td>
                        <td>
                            <input type="hidden" name="module" class="module" value="{{ $item->product->module }}" />
                            {{ $item->product->module }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </main>
        <footer>
            <div class="row">
                <div class="col-6">
                    {{ $list ? $list->links() : "" }}
                </div>
                <div class="col-6 align-right">
                    <button class="btn btn-primary" type="button" onclick="onChangeProduct()">저장</button>
                </div>
            </div>
        </footer>
    </section>
@endsection

@push("script")
<script>

    $(function() {
        $("#all_check").on("click", function() {
            const checked = $(this).is(":checked")
            $.each($("tbody > tr"), function() {
                if (checked) {
                    $(this).addClass("active");
                } else {
                    $(this).removeClass("active");
                }

                $(this).find(".product_option_id").attr("checked", checked);
            })

            onChangeCheckCnt();
        })
        $('td:not(:first-child), .product_option_id').on("click", function() {
            const tr = $(this).closest("tr");
            const option = $(this).hasClass("option_id") ? $(this) : tr.find(".product_option_id");;
            if (! $(this).hasClass("option_id")) {
                option.attr("checked" , ! option.is(":checked"));
            }

            if (option.is(":checked")) {
                tr.addClass("active")
            } else {
                tr.removeClass("active")
            }

            onChangeCheckCnt();

        })

        function onChangeCheckCnt() {

            $('#option_cnt').text($("tbody > tr.active").length)
        }
    })

    const fields = ["product_option_id", "product_id", "category_name", "product_name", "option_name", "sales_price", "customer_price", "price", 'module' ];
    function onChangeProduct() {
        const products = $("tbody > tr.active");
        if (products.length == 0) {
            alertify.alert("error", "선택된 옵션이 없습니다.");
            return false;
        }

        const params = [];
        const option_ids = [];
        $.each(products, function() {
            const param = {}
            const row = $(this);
            $.each(fields, function(index) {
                const field = fields[index];
                param[field] = row.find("." + field).text() ? row.find("." + field).text() : row.find("." + field).val()
            })
            option_ids.push(param['product_option_id']);
            params.push(param)
        })

        let isOverlay = false;
        const preOptions = [];
        if (window.opener.$(".product_option_id").length) {
            $.each(window.opener.$(".product_option_id"), function() {
                if (option_ids.indexOf($(this).val()) > -1) {
                    preOptions.push($(this).val())
                    isOverlay = true
                }
            });
        }

        if (isOverlay) {
            alertify.confirm('확인', "이미 등록된 옵션이 있습니다. 계속 진행하시겠습니까?", () => {
                onChange(params, preOptions);
            }, () => { })
        } else {
            onChange(params, preOptions);
        }
    }

    function onChange(params, preOptions) {
        const row = window.opener.$("#product #default");
        $.each(params, function (index) {
            const param = params[index];
            if (preOptions.length > 0 && preOptions.indexOf(param['option_id']) > -1) {
                return true;
            }

            const clone = row.clone();
            clone.attr("id", "");
            $.each(fields , function(idx) {
                const field = fields[idx];
                if (field == 'product_option_id' || field == 'product_id' || field == "price" || field == 'module') {
                    let col
                    if (field == 'module') {
                        col = clone.find("select[name="+field+"]");
                        const modules = param[field].split("|");
                        $.each(col.find("option"), function() {
                            if ( modules.indexOf($(this).val()) <= -1 ) {
                                $(this).remove();
                            }
                        })
                    } else {
                        col = clone.find("input[name="+field+"]");
                        col.val(param[field]);
                    }
                    col.attr("name", col.attr("name") + "[]")
                    col.data("accept", true);
                    col.addClass(field);

                }  else {
                    clone.find("."+field).text( field.indexOf('price') > -1 ? Number(param[field]).toLocaleString() :  param[field])
                }
            })

            window.opener.$('#product > tbody').append(clone.show());
        });

        window.opener.onChangeTotalPrice("product");
        onCloseEvent();
    }
    function onCloseEvent() {
        window.close();
    }
</script>
@endpush