@props([
'title' => '소셜로그인',
])
<x-admin.layout.default-layout :title="$title">
    <!-- 소셜 로그인 설정 섹션 -->
    <section id="anchor_social">
        <h2 class="h2_frm">소셜로그인 설정</h2>

        <form name="form_social" id="form_social" method="post" action="{{ route('admin.user.social.update.list') }}"
            onsubmit="return validate_social_form(this);" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="tbl_frm01 tbl_wrap">
                <table>
                    <caption>소셜로그인 설정</caption>
                    <colgroup>
                        <col class="grid_4">
                        <col>
                        <col class="grid_4">
                        <col>
                    </colgroup>
                    <tbody>
                        @foreach ($socialList as $social)
                        <tr>
                            <th scope="row">{{ $social->display_name }} 로그인</th>
                            <td colspan="3">
                                <input type="checkbox" name="socials[{{ $social->id }}][is_active]" value="1"
                                    @checked(old('socials[{{ $social->id }}][is_active]', $social->is_active))> 사용
                                <button type="button" class="btn btn-danger"
                                    onclick="delete_social('{{ $social->id }}');">삭제</button>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">테스트/연동 중</th>
                            <td>
                                <input type="checkbox" name="socials[{{ $social->id }}][is_test_mode]" value="1"
                                    @checked(old('socials[{{ $social->id }}][is_test_mode]', $social->is_test_mode))> 테스트 중
                            </td>
                            <th scope="row">약관동의 건너뛰기</th>
                            <td>
                                <input type="checkbox" name="socials[{{ $social->id }}][is_skip_terms]" value="1"
                                    @checked(old('socials[{{ $social->id }}][is_skip_terms]', $social->is_skip_terms))> 건너뛰기
                            </td>
                        </tr>
                        @foreach ($social->configs as $config)
                        @if ($loop->first || $loop->index % 2 == 0)
                        <tr>
                            @endif
                            <th scope="row">{{ $social->display_name . ' ' . $config->config_key }}</th>
                            <td>
                                <input type="{{ $config->is_sensitive ? 'password' : 'text' }}"
                                    name="socials[{{ $social->id }}][configs][{{ $config->config_key }}]"
                                    value="{{ $config->config_value }}" class="frm_input" size="40" autocomplete="new-password">
                                @if ($config->is_sensitive)
                                <button type="button" class="btn btn_02 btn_display_secret">보기</button>
                                @endif
                            </td>
                            @if ($loop->last || $loop->index % 2 == 1)
                        </tr>
                        @endif
                        @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="btn_confirm">
                <button type="submit" class="btn_submit">저장</button>
            </div>
        </form>
    </section>

    <!-- 새로운 소셜 로그인 추가 섹션 -->
    <section id="anchor_add_social">
        <h2 class="h2_frm">새로운 소셜로그인 추가</h2>

        <div class="local_desc01 local_desc">
            <strong>도움말 제목</strong>
            <p>도움말 내용</p>
        </div>

        <form name="form_add_social" id="form_add_social" method="post"
            action="{{ route('admin.user.social.store') }}" onsubmit="return validate_add_form(this);">
            @csrf
            <div class="tbl_frm01 tbl_wrap">
                <table>
                    <caption>새로운 소셜로그인 추가</caption>
                    <colgroup>
                        <col class="grid_4">
                        <col>
                        <col class="grid_4">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <th scope="row">서비스 선택</th>
                            <td colspan="3">
                                <select name="provider">
                                    <option value="">선택하세요</option>
                                    @foreach ($availableSocialList as $provider => $info)
                                    <option value="{{ $provider }}" data-keys="{{ json_encode($info['keys']) }}"
                                        data-name="{{ $info['name'] }}">
                                        {{ $info['name'] }}
                                    </option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                    </tbody>
                    <tbody id="area_configs">
                    </tbody>
                </table>
            </div>
            <div class="btn_confirm">
                <button type="submit" class="btn_submit">추가</button>
            </div>
        </form>
    </section>

    <script>
        const selectProvider = document.querySelector('select[name="provider"]');

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.btn_display_secret').forEach(button => {
                togglePasswordVisibility(button);
            });

            // 소셜 서비스 선택
            selectProvider.addEventListener('change', function(event) {
                const selected = event.target.querySelector('option:checked');
                const provider = selected.value;
                const keys = selected.dataset.keys;
                const name = selected.dataset.name;

                const areaConfigs = document.querySelector('#area_configs');
                areaConfigs.innerHTML = '';
                if (!provider || !keys) return;

                if (keys) {
                    let html = `<tr>
                                <th scope="row">사용 여부</th>
                                <td colspan="3"><input type="checkbox" name="is_active" value="1"> 사용</td>
                             </tr>
                             <tr>
                                <th scope="row">테스트/연동 중</th>
                                <td><input type="checkbox" name="is_test_mode" value="1"> 테스트 중</td>
                                <th scope="row">약관동의 건너뛰기</th>
                                <td><input type="checkbox" name="is_skip_terms" value="1"> 건너뛰기</td>
                             </tr>`;

                    const keysArray = JSON.parse(keys);
                    html += keysArray.reduce((acc, key, index) => {
                        const isEven = index % 2 === 0;
                        acc += isEven ? '<tr>' : '';
                        acc += `<th scope="row">${name} ${key}</th>`;
                        acc += `<td><input type="text" name="configs[${key}]" class="frm_input" size="40"></td>`;
                        acc += !isEven ? '</tr>' : '';
                        return acc;
                    }, '');

                    areaConfigs.innerHTML = html;
                }
            });
        });

        function validate_social_form(form) {
            const checkboxes = form.querySelectorAll('input[type="checkbox"][name^="socials"][name$="[is_active]"]');
            let confirmChange = false;
            let disabledProviders = [];
        
            checkboxes.forEach(checkbox => {
                if (checkbox.checked === false && checkbox.defaultChecked === true) {
                    const providerName = checkbox.closest('tr').querySelector('th').innerText;
                    disabledProviders.push(providerName);
                    confirmChange = true;
                }
            });
        
            if (confirmChange) {
                const message = `소셜로그인을 해제하시는 경우 소셜로그인을 이용하는 회원은 더 이상 계정을 이용할 수 없습니다.\n그래도 해제하시겠습니까?\n - ${disabledProviders.join(', ')}`;
                return confirm(message);
            }
        
            return true;
        }

        function validate_add_form(form) {
            return true;
        }

        function delete_social(provider) {
            let url = "{{ route('admin.user.social.destroy', ['socialProvider' => '__REPLACE_ID__']) }}";
            const message = '소셜로그인을 해제하시는 경우 소셜로그인을 이용하는 회원은 더 이상 계정을 이용할 수 없습니다.\n그래도 해제하시겠습니까?';
            deleteConfirm(url.replace('__REPLACE_ID__', provider), message);
        }
    </script>
</x-admin.layout.default-layout>