@extends("domains.common.layouts.layout")

@section("header")
@vite([
    'resources/js/domains/common/tomSelect.js',
    'resources/js/domains/common/tomSelectAllCheck.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
</style>
@endsection

@section("main-content")
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>상품 관리</h1>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('product.list') }}" class="search-form" method="GET">
                        <div class="search-input-wrap">
                            <div class="search-input">
                                <label for="register_start_date">등록일</label>
                                <input type="date" id="register_start_date" name="register_start_date"
                                @if (Request::get("register_start_date"))
                                    value="{{ Request::get("register_start_date") }}"
                                @endif
                                > - <input  type="date" name="register_end_date"
                                @if (Request::get("register_end_date"))
                                    value="{{ Request::get("register_end_date") }}"
                                @endif
                                >
                            </div>
                            <div class="search-input">
                                <label for="service_id">서비스 구분</label>
                                <select name="service_id" id="service_id" onchange="changeServiceId(event)">
                                    <option value="" >전체</option>
                                    @foreach ($services as $service)
                                        <option value={{ $service->id }} @selected(Request::get("service_id", null) == $service->id)>{{ $service->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="sales_type">상품 구분</label>
                                <select name="sales_type" id="sales_type">
                                    <option value="" >전체</option>
                                    <option value="판매" @selected(Request::get("sales_type", null) == "판매")>판매</option>
                                    <option value="지급" @selected(Request::get("sales_type", null) == "지급")>지급</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="module_id">모듈 구분</label>
                                <select name="module_id" id="module_id">
                                    <option value="" >선택</option>
                                    @foreach ($modules as $module)
                                        <option value={{ $module->id }} @selected(Request::get("module_id", null) == $module->id)>{{ $module->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="activated">전시 상태</label>
                                <select name="activated" id="activated">
                                    <option value="" @selected(Request::get("activated") === null)>전체</option>
                                    <option value="1" @selected(Request::get("activated") === "1")>전시</option>
                                    <option value="0" @selected(Request::get("activated") === "0")>비전시</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="is_accepted">접수 상태</label>
                                <select name="is_accepted" id="is_accepted">
                                    <option value="" @selected(Request::get("is_accepted") === null)>전체</option>
                                    <option value="1" @selected(Request::get("is_accepted") === "1")>오픈</option>
                                    <option value="0" @selected(Request::get("is_accepted") === "0")>마감</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="categories">카테고리</label>
                                <select name="categories[]" id="categories" class="long-input" multiple>
                                    <option value="">전체</option>
                                    @foreach ($productCategories as $key => $tmpProductCategories)
                                        @if (Request::get("service_id", null) && Request::get("service_id") != 3)
                                            @if ($key == Request::get("service_id"))
                                                @foreach ($tmpProductCategories as $productCategory)
                                                <option value="{{ $productCategory->id }}" @selected(in_array($productCategory->id, Request::get("categories", [])))>
                                                    {{ $productCategory->name }} ({{ App\Domains\Product\Infrastructure\Model\Service::getNameById($key) }})
                                                </option>
                                                @endforeach
                                            @endif
                                        @else
                                            @foreach ($tmpProductCategories as $productCategory)
                                            <option value="{{ $productCategory->id }}" @selected(in_array($productCategory->id, Request::get("categories", [])))>
                                                {{ $productCategory->name }} ({{ App\Domains\Product\Infrastructure\Model\Service::getNameById($key) }})
                                            </option>
                                            @endforeach
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="name">상품명</label>
                                <input type="text" name="name" id="name" autocomplete='on' value="{{ Request::get("name") }}">
                            </div>
                            <div class="search-input">
                                <input type="hidden" name="paginate" value="{{ Request::get("paginate") }}">
                                <input type="hidden" name="order_by" value="{{ Request::get("order_by") }}">
                                <input type="hidden" name="sort" value="{{ Request::get("sort") }}">
                            </div>
                        </div>
                        <button type="submit" class="search-button">조회</button>
                    </form>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span>총 <strong class="point-color">{{ $products->total() }}</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper">
                                {{ $products->links("vendor.pagination.default") }}
                            </div>
                            <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                                <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                                <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                                <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                                <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
                            </select>
                            <button type="button" class="button btn-style-2" onclick="excelDownload('.search-form', '{{ route('api.product.excel') ?? '' }}')">엑셀다운로드</button>
                            <a class="button btn-style-8" onclick="edmPopupOpen('{{ route('product.category.list') }}')">카테고리 관리</a>
                            <a href="{{ route('product.detail', 'academy') }}" class="button btn-style-1">어학원 상품 등록</a>
                            <a href="{{ route('product.detail', 'ielts') }}" class="button btn-style-1">인강 상품 등록</a>
                        </div>
                    </div>
                    <table class="default-table">
                        <colgroup>
                            <col width="70">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                            <col width="140">
                            <col width="">
                            <col width="100">
                            <col width="100">
                            <col width="100">
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">등록 일시</th>
                                <th scope="col">서비스 구분</th>
                                <th scope="col">상품 구분</th>
                                <th scope="col">모듈</th>
                                <th scope="col">전시 상태</th>
                                <th scope="col">접수 상태</th>
                                <th scope="col">카테고리</th>
                                <th scope="col">상품명</th>
                                <th scope="col">
                                    최저 옵션가
                                    <div class="info">
                                        <i class="ico-info">i</i>
                                        <div class="tooltip-con">
                                            할인 적용된 경우 할인가로 노출됩니다.
                                        </div>
                                    </div>
                                </th>
                                <th scope="col">할인</th>
                                <th scope="col">쿠폰/<br>구매 혜택</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            @forelse ($products as $product)
                            <tr onclick="window.location.href='{{ route('product.detail', ['service' => App\Domains\Product\Infrastructure\Model\Service::getNameById($product->service_id, true), 'id' => $product->id]) }}'">
                                <td>{{ $product->id }}</td>
                                <td>
                                    @if (isset($product->created_at))
                                    {{ explode(" ", $product->created_at)[0] }} <br>
                                    {{ explode(" ", $product->created_at)[1] }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $product->service->name }}</td>
                                <td>{{ $product->sales_type }}</td>
                                <td>{{ $product->module->name }}</td>
                                <td>{{ $product->activated == 1 ? "전시" : "비전시" }}</td>
                                <td>{{ $product->is_accepted == 1 ? "오픈" : "마감" }}</td>
                                <td>{{ $product->productCategories?->implode("name", ", ") ?? "-" }}</td>
                                <td class="text-left">{{ $product->name }}</td>
                                @php
                                $tmpOption = $product->productOptions->sortBy(fn ($option, $key) => $option->is_discounted ? $option->discount_price : $option->sales_price)->first();
                                @endphp
                                <td class="text-right">{{ $tmpOption->is_discounted ? $tmpOption->discount_price : $tmpOption->sales_price }}</td>
                                <td>{{ !empty($product->productOptions->firstWhere("is_discounted", 1)) ? "포함" : "-" }}</td>
                                <td>-</td>
                            </tr>
                            @empty
                            <tr><td colspan="12">No data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
@endsection

@push("script")
<script>
    const PRODUCT_CATEGORIES = {{ Js::from($productCategories) }};
    const SERVICE_NAMES = {
        {{ Js::from(1) }} : {{ Js::from(App\Domains\Product\Infrastructure\Model\Service::getNameById(1)) }},
        {{ Js::from(2) }} : {{ Js::from(App\Domains\Product\Infrastructure\Model\Service::getNameById(2)) }},
    };
    const prdouctCategorySelectId = "categories";
    let productCategoryTomSelect = null;

    window.addEventListener("load", () => {
        productCategoryTomSelect = initProductCategoryTomSelect(`#${prdouctCategorySelectId}`);
    });

    function initProductCategoryTomSelect(element) {
        return new TomSelect(element, {
            onChange: tomSelectedTopFix,
            plugins: {
                "checkbox_options": {},
                "input_autogrow": {},
                'dropdown_header': {
                	title: '전체 선택',
                    html: tomSelectAllCheckRender,
                },
            },
        });
    }

    function changeServiceId(e) {
        const serviceId = e.target.value;

        if (productCategoryTomSelect) {
            productCategoryTomSelect.clear();
            productCategoryTomSelect.destroy();
        }

        const $productCategorySelect = document.getElementById(prdouctCategorySelectId);
        $productCategorySelect.querySelectorAll("option").forEach(item => item.remove());

        const $defaultOption = document.createElement("option");
        $defaultOption.innerText = `전체`;
        $defaultOption.value = "";
        $productCategorySelect.appendChild($defaultOption);

        let targetCategories = [];
        if (serviceId == 1 || serviceId == 2) {
            targetCategories = PRODUCT_CATEGORIES[serviceId];
            targetCategories.forEach(item => {
                const $option = document.createElement("option");
                $option.innerText = `${item.name} (${SERVICE_NAMES[serviceId]})`;
                $option.value = item.id;
                $productCategorySelect.appendChild($option);
            });
        } else {
            targetCategories = PRODUCT_CATEGORIES[1];
            targetCategories.forEach(item => {
                const $option = document.createElement("option");
                $option.innerText = `${item.name} (${SERVICE_NAMES[1]})`;
                $option.value = item.id;
                $productCategorySelect.appendChild($option);
            });

            targetCategories = PRODUCT_CATEGORIES[2];
            targetCategories.forEach(item => {
                const $option = document.createElement("option");
                $option.innerText = `${item.name} (${SERVICE_NAMES[2]})`;
                $option.value = item.id;
                $productCategorySelect.appendChild($option);
            });
        }

        productCategoryTomSelect = initProductCategoryTomSelect($productCategorySelect);
        productCategoryTomSelect.refreshItems();
    }
</script>
@endpush