@props([
    'title' => '테마 설정',
    'pageTitle' => '테마 설정',
])
<x-admin.layout.default-layout :title="$title" :pageTitle="$pageTitle">
    <div id="configBasic" class="contents-wrapper">
        <input type="hidden" id="current_theme" value="{{ $currentTheme }}">

        <div id="fileManager">

            <div class="manager-header">
                <div class="count">
                    전체 {{ number_format(count($themes)) }}건
                </div>

                <button type="button" class="btn btn-contained-secondary" data-modal-target="fileUploader">테마추가</button>
            </div>

            <div class="manager-list">
                @forelse ($themes as $theme)
                <div class="item">
                    <div class="title">
                        {{ $theme['name'] }}
                        @if ($theme['is_default']) (기본테마) @endif
                    </div>
                    <div class="image">
                        <button type="button" data-modal-target="fileDetail" data-theme="{{ json_encode($theme) }}">
                            <img src="{{ asset('theme/' . $theme['theme'] . '/' . $theme['screenshot']) }}" alt="{{ $theme['name'] }}"
                                    onerror="this.src='{{ asset('static/admin/img/theme_img.jpg') }}'">
                        </button>
                    </div>
                    <div class="action">
                        <button type="button" class="btn btn-contained-primary" data-modal-target="fileDetail" data-theme="{{ json_encode($theme) }}">상세보기</button>
                        @if ($theme['theme'] === $currentTheme)
                            <span type="button" class="btn btn-solid-primary">사용중</span>
                        @else
                            <button type="button" class="btn btn-solid-secondary theme_active"
                                data-theme="{{ $theme['theme'] }}" data-name="{{ $theme['name'] }}">
                                사용하기
                            </button>
                            @empty ($theme['is_default'])
                                <button type="button" class="btn btn-texted-secondary theme_delete"
                                    data-theme="{{ $theme['theme'] }}" data-name="{{ $theme['name'] }}">
                                    삭제
                                </button>
                            @endisset
                        @endif
                    </div>
                </div>
                @empty
                <div class="item">
                    <div class="title">설치된 테마가 없습니다.</div>
                </div>
                @endforelse
            </div>

            <div class="modal" id="fileUploader">

                <div class="modal-overlay"></div>
                <div class="modal-container">
                    <div class="modal-header">
                        업로드
                        <button class="modal-close"><i class="ico ico-close"></i><span class="sr-only">닫기</span></button>
                    </div>

                    <form id="theme_form" action="{{ route('admin.design.theme.install') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="form-item">
                                <label for="theme_file" class="sr-only">첨부파일</label>
                                <input type="file" id="theme_file" name="theme_file" class="file" accept=".zip">
                                <span class="item-msg item-msg-help"></span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="btn_upload" class="btn btn-contained-primary" disabled>업로드</button>
                            <button type="button" class="btn btn-solid-secondary modal-close">닫기</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal" id="fileDetail">
                <input type="hidden" id="detail_theme" value="">
                <input type="hidden" id="detail_theme_name" value="">

                <div class="modal-overlay"></div>
                <div class="modal-container">
                    <div class="modal-header">
                        [상세보기] <span id="theme_name"></span>
                        <br>
                        <span id="theme_name"></span>
                        <button class="modal-close"><i class="ico ico-close"></i><span class="sr-only">닫기</span></button>
                    </div>
                    <div class="modal-body lined">
                        <img src="" id="theme_screenshot" alt=""
                            onerror="this.src='{{ asset('static/admin/img/theme_img.jpg') }}'">
                    </div>
                    <div class="modal-footer">
                        <div>
                            <button type="button" id="btn_delete" class="btn btn-solid-secondary">삭제</button>
                        </div>

                        <div>
                            <button type="button" id="btn_active" class="btn btn-contained-primary">사용하기</button>
                            <button type="button" class="btn btn-solid-secondary modal-close">닫기</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const uploadForm = document.getElementById('theme_form');
            const uploadFile = document.getElementById('theme_file');
            const btnUpload = document.getElementById('btn_upload');

            // 업로드 > 파일 선택
            uploadFile.addEventListener('change', function() {
                btnUpload.disabled = (this.files.length <= 0) ? true : false;
            });

            // 파일 업로드 버튼 클릭 시 이벤트 리스너 추가
            btnUpload.addEventListener('click', function() {
                if (uploadFile.files.length === 0) {
                    alert('업로드할 테마 압축파일을 선택하세요.');
                    return;
                }
                uploadForm.submit();
            });

            // 목록 > 테마 적용 버튼
            const btnThemeActive = document.querySelectorAll('.theme_active');
            btnThemeActive.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const theme = this.dataset.theme;
                    const name = this.dataset.name;

                    activeTheme(theme, name);
                });
            });

            // 목록 > 테마 삭제 버튼
            const btnThemeDelete = document.querySelectorAll('.theme_delete');
            btnThemeDelete.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const theme = this.dataset.theme;
                    const name = this.dataset.name;

                    deleteTheme(theme, name);
                });
            });

            // // 목록 > 사용안함 버튼
            // const btnThemeDeactive = document.querySelectorAll('.theme_deactive');
            // btnThemeDeactive.forEach(function (btn) {
            //     btn.addEventListener('click', function () {
            //         const name = this.dataset.name;
            //         const url = this.dataset.url;

            //         if (!confirm(name + " 테마 사용설정을 해제하시겠습니까?\n\n테마 설정을 해제하셔도 게시판 등의 스킨은 변경되지 않으므로 개별 변경작업이 필요합니다.")) {
            //             return false;
            //         }

            //         sendAjaxRequest(url, 'PUT', {}, { reload: true });
            //     });
            // });

            // 목록 > 테마 상세보기
            const fileDetail = document.getElementById('fileDetail');
            fileDetail.addEventListener('show.modal', function(e) {
                // 트리거 버튼에서 테마 데이터 가져오기
                const trigger = e.detail.trigger;
                const themeData = JSON.parse(trigger.dataset.theme);

                document.getElementById('theme_screenshot').src = "{{ asset('theme/') }}" + '/' + themeData.theme + '/' + themeData.screenshot;
                const themeNameElement = document.getElementById('theme_name');
                themeNameElement.innerHTML = themeData.uri ? `<a href="${themeData.uri}" target="_blank">${themeData.name}</a>` : themeData.name;

                // document.getElementById('theme_version').innerText = themeData.version;
                // document.getElementById('theme_description').innerText = themeData.detail;
                // document.getElementById('theme_preview').value = themeData.theme;

                // const themeMakerElement = document.getElementById('theme_maker');
                // themeMakerElement.innerHTML = themeData.maker_uri ? `<a href="${themeData.maker_uri}" target="_blank">${themeData.maker}</a>` : themeData.maker;

                // const themeLicenseElement = document.getElementById('theme_license');
                // themeLicenseElement.innerHTML = themeData.license_uri ? `<a href="${themeData.license_uri}" target="_blank">${themeData.license}</a>` : themeData.license;

                document.getElementById('detail_theme').value = themeData.theme;
                document.getElementById('detail_theme_name').value = themeData.name;

                const btnDelete = document.getElementById('btn_delete');
                btnDelete.style.display = (themeData.theme === document.getElementById('current_theme').value || themeData.is_default) ? 'none' : '';
                const btnActive = document.getElementById('btn_active');
                btnActive.style.display = themeData.theme === document.getElementById('current_theme').value ? 'none' : '';
            });

            // 상세보기 > 사용하기 버튼
            const btnActive = document.getElementById('btn_active');
            btnActive.addEventListener('click', function () {
                const theme = document.getElementById('detail_theme').value;
                const name = document.getElementById('detail_theme_name').value;

                activeTheme(theme, name);
            });

            // 상세보기 > 삭제 버튼
            const btnDelete = document.getElementById('btn_delete');
            btnDelete.addEventListener('click', function () {
                const theme = document.getElementById('detail_theme').value;
                const name = document.getElementById('detail_theme_name').value;

                deleteTheme(theme, name);
            });
        });

        /**
         * 테마 적용
         * @param {string} theme - 테마 이름
         * @param {string} name - 테마 이름
         */
        function activeTheme(theme, name) {
            if (!confirm(name + " 테마를 적용하시겠습니까?")) {
                return false;
            }
            let url = "{{ route('admin.design.theme.update', ['theme' => '__REPLACE_ID__']) }}"
            sendAjaxRequest(url.replace('__REPLACE_ID__', theme), 'PUT', {}, { reload: true });
        }

        /**
         * 테마 삭제
         * @param {string} theme - 테마 이름
         * @param {string} name - 테마 이름
         */
        function deleteTheme(theme, name) {
            if (!confirm(name + " 테마를 삭제하시겠습니까?")) {
                return false;
            }
            let url = "{{ route('admin.design.theme.uninstall', ['theme' => '__REPLACE_ID__']) }}"
            deleteConfirm(url.replace('__REPLACE_ID__', theme));
        }
    </script>
</x-admin.layout.default-layout>