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

@section("header")
@routes("promotion")
@vite([
    'resources/js/domains/common/toastGrid.js',
    'resources/js/domains/product/composed.js',
    'resources/js/domains/promotion/gridColumns.js',
])
<style>
    div.ts-wrapper div.ts-control input {
        height: auto;
    }
    .tui-grid-layer-state {
        z-index: unset !important;
    }
</style>
@endsection

@section("main-content")
<div class="window-popup-titleBox">
    <h2>이벤트 응모 목록</h2>
    <span class="window-popup-close" onclick="edmPopupClose()"><i class="dripicons-cross"></i></span>
</div>
<div class="window-popup-con">
    <p class="mb-3">
    이벤트에 응모된 내용을 확인합니다.<br>
    당첨자를 선택/해제 처리할 수 있습니다.
    </p>
    <form id="search-form" style="display: none;">
        <input type="hidden" name="target_grid" value="eventParticipantsGrid">
        <input type="hidden" name="paginate" value="">
        <input type="hidden" name="order_by" value="">
        <input type="hidden" name="sort" value="">
        <input type="hidden" name="page" value="">
    </form>

    <div class="pd-wrap">
        <div class="pd-con-wrap">
            <div class="pd-con">
                <div class="add-list-wrapper">

                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper"></div>
                            <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '', getEventParticipants)">
                                <option value="10">10개씩 보기</option>
                                <option value="30">30개씩 보기</option>
                                <option value="50">50개씩 보기</option>
                                <option value="100">100개씩 보기</option>
                            </select>
                            <button type="button" class="button btn-style-2" onclick="">엑셀다운로드</button>
                            <button class="button btn-style-1" onclick="appendSelectedRow(eventParticipantsGrid, addEventParticipantsGrid)">추가</button>
                        </div>
                    </div>
                    <div id="eventParticipantsGrid"></div>
                </div>
            </div>
        </div>
        <div class="pd-con-wrap">
            <div class="pd-con">
                <div class="add-list-wrapper">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                        </div>
                        <div class="pagination-helper">
                            <button type="button" class="button btn-style-2" onclick="">엑셀다운로드</button>
                            <button type="button" class="button btn-style-8" onclick="removeCheckedRows(addEventParticipantsGrid)">행 삭제</button>
                            {{-- TODO 문자발송 로직 추가 --}}
                            <a class="button btn-style-1">문자 발송</a>
                        </div>
                    </div>
                    <div id="addEventParticipantsGrid"></div>
                    <div class="validation-wrap"><p></p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center">
        <button class="button btn-style-1" type="button" onclick="setEventParticipantsWon()">적용</button>
    </div>
</div>
@endsection

@push("script")
<script>
    const EVNET_ID = {{ Js::from($id) }};
    const ALREADY_WON_PARTICIPANT_LIST = {{ Js::from($eventParticipants->whereNotNull("won_at")->all()) }};
    let eventParticipantsGrid = null;
    let addEventParticipantsGrid = null;

    window.addEventListener("load", () => {
        eventParticipantsGrid = new Grid({
            el: document.getElementById("eventParticipantsGrid"),
            columnOptions: {minWidth: 10},
            rowHeaders: [{type: 'checkbox'}],
            columns: EVENT_PARTICIPANT_COLUMNS,
            contextMenu: null,
            scrollX: false,
            scrollY: false,
        });

        addEventParticipantsGrid = new Grid({
            el: document.getElementById("addEventParticipantsGrid"),
            data: ALREADY_WON_PARTICIPANT_LIST,
            columnOptions: {minWidth: 10},
            rowHeaders: [{type: 'checkbox'}],
            columns: EVENT_PARTICIPANT_COLUMNS,
            contextMenu: null,
            scrollX: false,
            scrollY: false,
        });

        getEventParticipants();
        fitWindowSize();
    });

    function getEventParticipants() {
        getListDataExec(route('api.promotion.event.event-participants', {id: EVNET_ID})
                        , new FormData(document.querySelector('#search-form'))
                        , eventParticipantsGrid
                        , false
        );
    }

    function setEventParticipantsWon() {
        const URL = route("api.promotion.event.set-event-participants-won");
        const DATA = new FormData();
        DATA.append("event_id", EVNET_ID);
        addEventParticipantsGrid.getData().forEach(item => DATA.append("event_participant_ids[]", item.id));

        edmAjax({
            url: URL,
            method: "POST",
            data: DATA,
            callback: response => {
                if (response.status == 200 && response.data)
                    location.reload();
                else
                    alertify.alert("알림", "실패했습니다.");
            },
        });
    }

</script>
@endpush