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

@section("header")
@routes("product")
@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">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>프로모션 플래그 관리</h1>
            </div>
        </div>
    </div>

    <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.promotion-management') }}" 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" class="req">서비스 구분</label>
                                <select name="service_id" id="service_id" onchange="changeServiceId(event)">
                                    @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="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="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", null) }}">
                            </div>
                            <div class="search-input">
                                <label for="included_coupon">쿠폰/구매 혜택</label>
                                <select name="included_coupon" id="included_coupon">
                                    <option value="">전체</option>
                                    <option value="1" @selected(Request::get("included_coupon", null) == "1")>포함</option>
                                    <option value="0" @selected(Request::get("included_coupon", null) === "0")>미포함</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="discount_type_id">할인</label>
                                <select name="discount_type_id" id="discount_type_id">
                                    <option value="" >전체</option>
                                    @foreach ($discountTypes as $discountType)
                                    <option value={{ $discountType->id }} @selected(Request::get("discount_type_id", null) == $discountType->id)>{{ $discountType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="">프로모션 플래그</label>
                                <select name="promotion_flag" id="promotion_flag">
                                    <option value="" >전체</option>
                                    <option value="1" >Y</option>
                                    <option value="0" >N</option>
                                </select>
                            </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>
            </div>
        </div>
    </div>

    <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.activation-management-excel') ?? '' }}')">엑셀다운로드</button>
                            <a class="button btn-style-1" onclick="handleSubmit()">적용</a>
                        </div>
                    </div>
                    <table class="default-table">
                        <colgroup>
                            <col width="50">
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>
                                    <input class="all-select" type="checkbox" onchange="changeAllSelect(event)">
                                </th>
                                <th>번호</th>
                                <th>등록일시</th>
                                <th>모듈</th>
                                <th>접수 상태</th>
                                <th>카테고리</th>
                                <th>상품명</th>
                                <th>쿠폰/구매 혜택</th>
                                <th>할인</th>
                                <th>
                                    최저 옵션가
                                    <div class="info">
                                        <i class="ico-info">i</i>
                                         <div class="tooltip-con">
                                            옵션가중 가장 낮은 판매가 또는 할인가가 노출됩니다.
                                        </div>
                                    </div>
                                </th>
                                <th class="editable">프로모션 플래그</th>
                                <th class="editable">플래그 색상</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr class="new-product">
                                <td class="table-alert" colspan="10">
                                    <p>
                                        일괄 적용할 값을 선택 및 입력 후 적용할 상품들을 목록에서 체크하여 상단의 적용 버튼 선택 시 일괄 적용 가능합니다.
                                    </p>
                                </td>
                                <td>
                                   <input type="text" placeholder="최대 10글자까지 입력 가능" class="long-input promotion_flag_word" name="promotion_flag_word">
                                </td>
                                <td>
                                    <dl class="flag-color-list">
                                        <dt class="blind">플래그 색상 리스트</dt>
                                        @foreach ($promotionFlags as $promotionFlag)
                                        <dd>
                                            <input type="radio" name="promotion_flag_id0" class="promotion_flag_id" value="{{ $promotionFlag->id }}" @style(["background-color: {$promotionFlag->color}"])>
                                        </dd>
                                        @endforeach
                                    </dl>
                                </td>
                            </tr>
                            @foreach ($products as $key => $product)
                            <tr class="product" data-id="{{ $product->id }}">
                                <td class="check-wrap"><input name="check" type="checkbox" onchange="changeSelect(event)"></td>
                                <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->module->name }}</td>
                                <td>
                                    @if ($product->is_accepted == 1)
                                    오픈
                                    @else
                                    마감
                                    @endif
                                </td>
                                <td>{{ $product->productCategories?->implode("name", ", ") ?? "-" }}</td>
                                <td class="text-left">
                                    <a href="{{ route('product.detail', ['service' => App\Domains\Product\Infrastructure\Model\Service::getNameById($product->service_id, true), 'id' => $product->id]) }}"  target="_blank">
                                        {{ $product->name }}
                                    </a>
                                </td>
                                <td>포함</td>
                                <td>{{ !empty($product->productOptions->firstWhere("is_discounted", 1)) ? "포함" : "-" }}</td>
                                @php
                                $tmpOption = $product->productOptions->sortBy(fn ($option, $key) => $option->is_discounted ? $option->discount_price : $option->sales_price)->first();
                                @endphp
                                <td>{{ $tmpOption->is_discounted ? $tmpOption->discount_price : $tmpOption->sales_price }}</td>
                                <td>
                                    <input type="text" placeholder="최대 10글자까지 입력 가능" class="long-input promotion_flag_word" name="promotion_flag_word" value="{{ $product->promotion_flag_word }}">
                                </td>
                                <td>
                                    <dl class="flag-color-list">
                                        <dt class="blind">플래그 색상 리스트</dt>
                                        @foreach ($promotionFlags as $promotionFlag)
                                        <dd>
                                            <input type="radio" name="promotion_flag_id{{ $key }}" class="promotion_flag_id" value="{{ $promotionFlag->id }}" @style(["background-color: {$promotionFlag->color}"]) @checked($product->promotion_flag_id == $promotionFlag->id)>
                                        </dd>
                                        @endforeach
                                    </dl>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push("script")
<script>
    const PRODUCTS = {{ Js::from($products->groupBy("id")->all()) }}
    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}`);
        changeServiceId({target: document.getElementById("service_id")});
    });

    async function handleSubmit() {
        const isVerified = validate();
        if (!isVerified)
            return;

        if (!(await alertifyAsync("알림", "설정 내용을 일괄 저장하시겠습니까?<br>기존의 오픈/마감 설정이 업데이트 처리 됩니다.")))
            return;

        const BODY = getRequestBody();
        const URL = route('api.product.products-set');
        // const callback = response => response?.data == 1 ? location.reload() : errorUI("오류가 발생했습니다.");
        const callback = response => console.log(response);

        edmAjax({
            method: "post",
            url: URL,
            data: BODY,
            callback: callback,
        });
    }

    function validate() {
        document.querySelectorAll("dd.validation-wrap").forEach((item) => item.style.display = "none");

        let $validationWrap = null;
        const $allCheckboxes = Array.from(document.querySelectorAll("tr.product input[name='check']"));
        const $checkedCheckboxes = $allCheckboxes.filter(item => item.checked == true);
        const $uncheckedCheckboxes = $allCheckboxes.filter(item => item.checked == false);

        // 일괄 적용 Validation
        if ($checkedCheckboxes.length > 0) {
            const $newProduct = document.querySelector("tr.new-product");
        }

        // 개별 항목 Validation
        $uncheckedCheckboxes.forEach($checkbox => {
            let $tmpWrap = null;
            const $product = $checkbox.closest("tr");
        });

        if ($validationWrap)
            return false;
        else
            return true;
    }

    function getRequestBody() {
        const $allCheckboxes = Array.from(document.querySelectorAll("tr.product input[name='check']"));

        const BODY = [];
        const $uncheckedProducts = $allCheckboxes.filter(item => item.checked == false).map(item => item.closest("tr"));
        $uncheckedProducts.forEach($product => {
            const product = getProductObject($product);
            BODY.push(product);
        });

        const $newProduct = document.querySelector("tr.new-product");
        const newProduct = getProductObject($newProduct);

        const $checkedProductOptions = $allCheckboxes.filter(item => item.checked == true).map(item => item.closest("tr"));
        $checkedProductOptions.forEach($product => {
            const product = getProductObject($product);
            product.promotion_flag_word = newProduct.promotion_flag_word;
            product.promotion_flag_id = newProduct.promotion_flag_id;

            BODY.push(product);
        });

        return BODY;
    }

    function getProductObject($product) {
        const id = $product?.dataset?.id;

        const promotionFlagWord = $product.querySelector(".promotion_flag_word")?.value;
        const promotionFlagId = $product.querySelector(".promotion_flag_id:checked")?.value;

        const product = {
            id: id,
            promotion_flag_word: promotionFlagWord != "" ? promotionFlagWord : null,
            promotion_flag_id: promotionFlagId != null ? promotionFlagId : null,
            isAutoDataSet: false,
        };

        return product;
    }

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

    function changeAllSelect(e) {
        document.querySelectorAll("tr.product input[name='check']").forEach(item => item.checked = e.target.checked);
    }

    function changeSelect(e) {
        let isAllSelected = true;
        document.querySelectorAll("tr.product input[name='check']").forEach(item => item.checked == false ? isAllSelected = false : 1);

        const $allSelectCheckbox = document.querySelector("input.all-select");
        if (isAllSelected)
            $allSelectCheckbox.checked = true;
        else
            $allSelectCheckbox.checked = false;
    }

    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