@props([
    'title' => '팝업 관리',
    'pageTitle' => '팝업',
])
<x-admin.layout.default-layout :title="$title" :pageTitle="$pageTitle">
    <div id="popupList" class="contents-wrapper">
        <div class="contents-header">
            <form id="form_search" name="form_search" method="get">
                <input type="hidden" name="is_active" value="{{ Request::get('is_active') }}">
                <input type="hidden" name="position" value="{{ Request::get('position') }}">
                <input type="hidden" name="limit" value="{{ Request::get('limit') }}">

                <div class="header-search">
                    <div>검색</div>
                    <div>
                        <div class="form-item">
                            <label for="keyword" class="sr-only">검색어</label>
                            <input type="text" id="keyword" name="keyword" value="{{ Request::get('keyword') }}" class="item-input" placeholder="타이틀">
                        </div>
                    </div>
                </div>
                <div class="header-submit">
                    <button type="submit" class="btn btn-contained-primary">검색</button>
                </div>
            </form>
        </div>

        <form>
            <div class="table-header">
                <div class="col">
                    <button type="button" class="btn btn-solid-tertiary icon-only">
                        <i class="ico ico-delete"></i>
                        <span class="sr-only">선택삭제</span>
                    </button>

                    <div>
                        전체 {{ number_format($total) }}건
                        (<span class="count-selected">0</span>건 선택)
                    </div>
                </div>

                <div class="col">
                    <div class="form">
                        <div class="form-item">
                            <x-admin.forms.items-per-page formId="form_search"/>
                        </div>
                    </div>
                    <a href="{{ route('admin.common.popup.create') }}" class="btn btn-contained-secondary">팝업추가</a>
                </div>
            </div>

            <table class="table-base">
                <thead>
                    <tr>
                        <th scope="col" class="only-checkbox">
                            <div class="form-checkbox">
                                <div class="inner">
                                    <input type="checkbox" id="chkall" name="chkall" value="1" id="chkall">
                                    <label for="chkall" tabindex="0"><span class="sr-only">전체선택하기</span></label>
                                </div>
                            </div>
                        </th>
                        <th scope="col" class="qna-status">
                            <x-admin.forms.selectbox
                                id="list_is_active"
                                name="list_is_active"
                                :value="Request::get('is_active')"
                                :options="['' => '전체', '1' => '노출 중', '0' => '종료']"
                                :class="'size-small'"
                            />
                        </th>
                        <th scope="col" class="qna-category">
                            <x-admin.forms.selectbox
                                id="list_position"
                                name="list_position"
                                :value="Request::get('position')"
                                :options="['' => '전체'] + $positions"
                                :class="'size-small'"
                            />
                        </th>
                        <th scope="col">타이틀</th>
                        <th scope="col">시작일시</th>
                        <th scope="col">종료일시</th>
                        <th scope="col">관리</th>
                    </tr>
                </thead>
                <tbody>
                @forelse ($popups as $popup)
                    <tr>
                        <td class="only-checkbox">
                            <div class="form-checkbox">
                                <div class="inner">
                                    <input type="checkbox" id="popup_{{ $popup->id }}" name="popup_ids[]" value="{{ $popup->id }}">
                                    <label for="popup_{{ $popup->id }}" tabindex="0"><span class="sr-only">선택하기</span></label>
                                </div>
                            </div>
                        </td>
                        <td class="popup-status">
                            @if ($popup->is_active)
                                <span class="status status-allowed">노출 중</span>
                            @else
                                <span class="status status-blocked">종료</span>
                            @endif
                        </td>
                        <td class="popup-category">{{ $popup->position }}</td>
                        <!-- 확인 후 적용해야함 -->
                        {{-- <td class="popup-category">
                            <div class="item-select">
                                <input type="hidden" id="selected_option1" name="selected_option" value="">
                                <button type="button" class="select-trigger">
                                    <span class="select-selected">메인화면</span>
                                    <i class="ico ico-arrow select__icon"></i>
                                </button>
                                <ul class="select__options">
                                    <li class="options-item" data-value="" tabindex="0">전체</li>
                                    <li class="options-item" data-value="" tabindex="0">메인화면</li>
                                    <li class="options-item" data-value="" tabindex="0">고객센터 메인</li>
                                </ul>
                            </div>
                        </td> --}}
                        <td>{{ $popup->title }}</td>
                        <td>{{ $popup->start_datetime }}</td>
                        <td>{{ $popup->end_datetime }}</td>
                        <td>
                            @if ($popup->is_active)
                                <button type="button" class="btn btn-contained-secondary is_active" data-url="{{ route('admin.common.popup.enabled', ['popup' => $popup]) }}">즉시종료</button>
                            @endif
                            <a href="{{ route('admin.common.popup.edit', ['popup' => $popup]) }}" class="btn btn-contained-secondary">수정</a>
                            <button type="button" class="btn btn-solid-secondary btn_delete" data-url="{{ route('admin.common.popup.destroy', ['popup' => $popup]) }}">삭제</button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="empty_table">등록된 팝업레이어가 없습니다.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>

            {{ $popups->links('admin.paginate.default') }}
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const formSearch = document.querySelector('#form_search');
            // 목록 > 상태 선택
            const listIsActive = document.querySelectorAll('input[type="radio"][name="list_is_active"]');
            listIsActive.forEach(radio => {
                radio.addEventListener('click', function() {
                    formSearch.is_active.value = radio.value;
                    formSearch.submit();
                });
            });

            // 목록 > 위치 선택
            const listPosition = document.querySelectorAll('input[type="radio"][name="list_position"]');
            listPosition.forEach(radio => {
                radio.addEventListener('click', function() {
                    formSearch.position.value = radio.value;
                    formSearch.submit();
                });
            });

            // 목록 > 즉시종료 버튼
            const is_active = document.querySelectorAll('.is_active');
            is_active.forEach(function(el) {
                el.addEventListener('click', function() {
                    if (!confirm('팝업을 ' + el.textContent + '하시겠습니까?')) {
                        return false;
                    }
                    sendAjaxRequest(el.dataset.url, 'PUT', {}, {reload: true});
                });
            });

            // 목록 > 삭제 버튼
            const btn_delete = document.querySelectorAll('.btn_delete');
            btn_delete.forEach(function(el) {
                el.addEventListener('click', function() {
                    deleteConfirm(el.dataset.url);
                });
            });
        });
    </script>
</x-admin.layout.default-layout>