@props([
    'title' => '소셜로그인 API',
    'pageTitle' => '소셜로그인 API',
])
<x-admin.layout.default-layout :title="$title" :pageTitle="$pageTitle">
    <div id="socialLoginApi" class="contents-wrapper">

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

            <div class="form">
                @foreach ($socials as $social)
                <div class="item">

                    <input type="hidden" name="socials[{{ $social->id }}][display_name]" value="{{ $social->display_name }}">

                    <div class="item-header">

                        <div class="col">
                            <i class="ico ico-social-login-{{ $social->id }}"></i>
                            {{ $social->display_name }} 로그인
                        </div>

                        <div class="col">
                            <x-admin.forms.toggle
                                :id="'socials[' . $social->id . ']'"
                                :name="'socials[' . $social->id . '][is_active]'"
                                :is_active="old('socials[' . $social->id . '][is_active]', $social->is_active)"
                                label="활성"
                                label_inactive="비활성"
                                :label_show="false"
                            />
                        </div>

                    </div>

                    <div id="tab_socials[{{ $social->id }}]" class="toggle-contents item-body">
                        @foreach ($social->configs as $config)
                        <div class="form-item">

                            <div class="col">
                                <label for="socials[{{ $social->id }}][configs][{{ $config->config_key }}]" class="item-label">
                                    {{ $config->config_key }}
                                </label>
                            </div>

                            <div class="col">
                                <input type="{{ $config->is_sensitive ? 'password' : 'text' }}"
                                    id="socials[{{ $social->id }}][configs][{{ $config->config_key }}]"
                                    name="socials[{{ $social->id }}][configs][{{ $config->config_key }}]"
                                    value="{{ $config->config_value }}" class="item-input" size="40" autocomplete="new-password">
                                <span class="item-msg item-msg-help"></span>
                            </div>

                        </div>
                        @endforeach

                        <div class="form-item">

                            <div class="col">
                                <span class="item-label">약관동의 건너뛰기</span>
                            </div>

                            <div class="col">
                                <div class="form-checkbox">
                                    <div class="inner">
                                        <input type="checkbox" id="{{ $social->id }}-is_skip_terms" name="socials[{{ $social->id }}][is_skip_terms]" value="1"
                                        @checked(old('socials[{{ $social->id }}][is_skip_terms]', $social->is_skip_terms))>
                                        <label for="{{ $social->id }}-is_skip_terms" tabindex="0">사용</label>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="form-item">

                            <div class="col">
                                <span class="item-label">작업(테스트/심사) 중</span>
                            </div>

                            <div class="col">
                                <div class="form-checkbox">
                                    <div class="inner">
                                        <input type="checkbox" id="{{ $social->id }}-is_test_mode" name="socials[{{ $social->id }}][is_test_mode]" value="1"
                                        @checked(old('socials[{{ $social->id }}][is_test_mode]', $social->is_test_mode))>
                                        <label for="{{ $social->id }}-is_test_mode" tabindex="0">사용</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="form-submit is-fixed">
                <input type="submit" class="btn btn-contained-primary" value="저장하기">
            </div>

        </form>

    </div>

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

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

        function validateForm(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('.item').querySelector('input[name^="socials"][name$="[display_name]"]').value;
                    disabledProviders.push(providerName);
                    confirmChange = true;
                }
            });

            if (confirmChange) {
                const message = `소셜로그인을 해제하시는 경우 소셜로그인을 이용하는 회원은 더 이상 계정을 이용할 수 없습니다.\n그래도 해제하시겠습니까?\n\n - ${disabledProviders.join(', ')}`;
                return confirm(message);
            }

            return true;
        }
    </script>
</x-admin.layout.default-layout>