<!-- Global Enable/Disable Social Logins -->
<div class="mb-4 row">
    <label for="settings[social_login][enabled]" class="col-sm-2 control-label">Enable Social Logins</label>
    <div class="col-sm-3">
        <select class="form-control" id="settings[social_login][enabled]" name="settings[social_login][enabled]">
            <option value="no" @if ( old('settings.social_login.enabled', setting('social_login.enabled')) == 'no' ) SELECTED @endif>No</option>
            <option value="yes" @if ( old('settings.social_login.enabled', setting('social_login.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
        </select>
    </div>
</div>

<div class="accordion accordion-flush" id="social-providers">

    {{-- Google --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="google-heading">
            <button class="accordion-button {{ session('active_tab') == 'google' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#google"
                    aria-expanded="{{ session('active_tab') == 'google' ? 'true' : 'false' }}"
                    aria-controls="google">
                Google
                @if ( setting('services.google.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="google" class="accordion-collapse collapse {{ session('active_tab') == 'google' ? 'show' : '' }}"
             aria-labelledby="google-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Google</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][google][enabled]">
                            <option value="no" @if ( old('settings.services.google.enabled', setting('services.google.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.google.enabled', setting('services.google.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][google][client_id]"
                               value="{{ old('settings.services.google.client_id', setting('services.google.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][google][client_secret]"
                               value="{{ old('settings.services.google.client_secret', setting('services.google.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/google/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Facebook --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="facebook-heading">
            <button class="accordion-button {{ session('active_tab') == 'facebook' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#facebook"
                    aria-expanded="{{ session('active_tab') == 'facebook' ? 'true' : 'false' }}"
                    aria-controls="facebook">
                Facebook
                @if ( setting('services.facebook.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="facebook" class="accordion-collapse collapse {{ session('active_tab') == 'facebook' ? 'show' : '' }}"
             aria-labelledby="facebook-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Facebook</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][facebook][enabled]">
                            <option value="no" @if ( old('settings.services.facebook.enabled', setting('services.facebook.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.facebook.enabled', setting('services.facebook.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">APP ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][facebook][client_id]"
                               value="{{ old('settings.services.facebook.client_id', setting('services.facebook.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">APP Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][facebook][client_secret]"
                               value="{{ old('settings.services.facebook.client_secret', setting('services.facebook.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Valid OAuth Redirect URIs</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/facebook/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Twitter / X --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="twitter-heading">
            <button class="accordion-button {{ session('active_tab') == 'twitter' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#twitter"
                    aria-expanded="{{ session('active_tab') == 'twitter' ? 'true' : 'false' }}"
                    aria-controls="twitter">
                Twitter / X
                @if ( setting('services.twitter.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="twitter" class="accordion-collapse collapse {{ session('active_tab') == 'twitter' ? 'show' : '' }}"
             aria-labelledby="twitter-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Twitter / X</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][twitter][enabled]">
                            <option value="no" @if ( old('settings.services.twitter.enabled', setting('services.twitter.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.twitter.enabled', setting('services.twitter.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">APP ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][twitter][client_id]"
                               value="{{ old('settings.services.twitter.client_id', setting('services.twitter.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">APP Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][twitter][client_secret]"
                               value="{{ old('settings.services.twitter.client_secret', setting('services.twitter.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Valid OAuth Redirect URIs</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/twitter/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- GitHub --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="github-heading">
            <button class="accordion-button {{ session('active_tab') == 'github' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#github"
                    aria-expanded="{{ session('active_tab') == 'github' ? 'true' : 'false' }}"
                    aria-controls="github">
                GitHub
                @if ( setting('services.github.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="github" class="accordion-collapse collapse {{ session('active_tab') == 'github' ? 'show' : '' }}"
             aria-labelledby="github-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable GitHub</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][github][enabled]">
                            <option value="no" @if ( old('settings.services.github.enabled', setting('services.github.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.github.enabled', setting('services.github.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][github][client_id]"
                               value="{{ old('settings.services.github.client_id', setting('services.github.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][github][client_secret]"
                               value="{{ old('settings.services.github.client_secret', setting('services.github.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/github/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- GitLab --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="gitlab-heading">
            <button class="accordion-button {{ session('active_tab') == 'gitlab' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#gitlab"
                    aria-expanded="{{ session('active_tab') == 'gitlab' ? 'true' : 'false' }}"
                    aria-controls="gitlab">
                GitLab
                @if ( setting('services.gitlab.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="gitlab" class="accordion-collapse collapse {{ session('active_tab') == 'gitlab' ? 'show' : '' }}"
             aria-labelledby="gitlab-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable GitLab</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][gitlab][enabled]">
                            <option value="no" @if ( old('settings.services.gitlab.enabled', setting('services.gitlab.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.gitlab.enabled', setting('services.gitlab.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][gitlab][client_id]"
                               value="{{ old('settings.services.gitlab.client_id', setting('services.gitlab.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][gitlab][client_secret]"
                               value="{{ old('settings.services.gitlab.client_secret', setting('services.gitlab.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/gitlab/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- LinkedIn --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="linkedin-heading">
            <button class="accordion-button {{ session('active_tab') == 'linkedin-openid' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#linkedin-openid"
                    aria-expanded="{{ session('active_tab') == 'linkedin-openid' ? 'true' : 'false' }}"
                    aria-controls="linkedin-openid">
                LinkedIn
                @if ( setting('services.linkedin-openid.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="linkedin-openid" class="accordion-collapse collapse {{ session('active_tab') == 'linkedin-openid' ? 'show' : '' }}"
             aria-labelledby="linkedin-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable LinkedIn</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][linkedin-openid][enabled]">
                            <option value="no" @if ( old('settings.services.linkedin-openid.enabled', setting('services.linkedin-openid.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.linkedin-openid.enabled', setting('services.linkedin-openid.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][linkedin-openid][client_id]"
                               value="{{ old('settings.services.linkedin-openid.client_id', setting('services.linkedin-openid.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][linkedin-openid][client_secret]"
                               value="{{ old('settings.services.linkedin-openid.client_secret', setting('services.linkedin-openid.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/linkedin-openid/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Bitbucket --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="bitbucket-heading">
            <button class="accordion-button {{ session('active_tab') == 'bitbucket' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#bitbucket"
                    aria-expanded="{{ session('active_tab') == 'bitbucket' ? 'true' : 'false' }}"
                    aria-controls="bitbucket">
                Bitbucket
                @if ( setting('services.bitbucket.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="bitbucket" class="accordion-collapse collapse {{ session('active_tab') == 'bitbucket' ? 'show' : '' }}"
             aria-labelledby="bitbucket-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Bitbucket</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][bitbucket][enabled]">
                            <option value="no" @if ( old('settings.services.bitbucket.enabled', setting('services.bitbucket.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.bitbucket.enabled', setting('services.bitbucket.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][bitbucket][client_id]"
                               value="{{ old('settings.services.bitbucket.client_id', setting('services.bitbucket.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][bitbucket][client_secret]"
                               value="{{ old('settings.services.bitbucket.client_secret', setting('services.bitbucket.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/bitbucket/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Slack --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="slack-heading">
            <button class="accordion-button {{ session('active_tab') == 'slack-openid' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#slack-openid"
                    aria-expanded="{{ session('active_tab') == 'slack-openid' ? 'true' : 'false' }}"
                    aria-controls="slack-openid">
                Slack
                @if ( setting('services.slack-openid.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="slack-openid" class="accordion-collapse collapse {{ session('active_tab') == 'slack-openid' ? 'show' : '' }}"
             aria-labelledby="slack-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Slack</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][slack-openid][enabled]">
                            <option value="no" @if ( old('settings.services.slack-openid.enabled', setting('services.slack-openid.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.slack-openid.enabled', setting('services.slack-openid.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][slack-openid][client_id]"
                               value="{{ old('settings.services.slack-openid.client_id', setting('services.slack-openid.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][slack-openid][client_secret]"
                               value="{{ old('settings.services.slack-openid.client_secret', setting('services.slack-openid.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/slack-openid/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Twitch --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="twitch-heading">
            <button class="accordion-button {{ session('active_tab') == 'twitch' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#twitch"
                    aria-expanded="{{ session('active_tab') == 'twitch' ? 'true' : 'false' }}"
                    aria-controls="twitch">
                Twitch
                @if ( setting('services.twitch.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="twitch" class="accordion-collapse collapse {{ session('active_tab') == 'twitch' ? 'show' : '' }}"
             aria-labelledby="twitch-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Twitch</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][twitch][enabled]">
                            <option value="no" @if ( old('settings.services.twitch.enabled', setting('services.twitch.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.twitch.enabled', setting('services.twitch.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][twitch][client_id]"
                               value="{{ old('settings.services.twitch.client_id', setting('services.twitch.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Client Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][twitch][client_secret]"
                               value="{{ old('settings.services.twitch.client_secret', setting('services.twitch.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Authorised Redirect URI</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/twitch/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Envato --}}
    <div class="accordion-item">
        <h2 class="accordion-header" id="envato-heading">
            <button class="accordion-button {{ session('active_tab') == 'envato' ? '' : 'collapsed' }}"
                    type="button" data-bs-toggle="collapse" data-bs-target="#envato"
                    aria-expanded="{{ session('active_tab') == 'envato' ? 'true' : 'false' }}"
                    aria-controls="envato">
                Envato
                @if ( setting('services.envato.enabled') == 'yes' )
                    <span class="badge bg-success ms-2">Enabled</span>
                @endif
            </button>
        </h2>
        <div id="envato" class="accordion-collapse collapse {{ session('active_tab') == 'envato' ? 'show' : '' }}"
             aria-labelledby="envato-heading" data-bs-parent="#social-providers">
            <div class="accordion-body">
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Enable Envato</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="settings[services][envato][enabled]">
                            <option value="no" @if ( old('settings.services.envato.enabled', setting('services.envato.enabled')) == 'no' ) SELECTED @endif>No</option>
                            <option value="yes" @if ( old('settings.services.envato.enabled', setting('services.envato.enabled')) == 'yes' ) SELECTED @endif>Yes</option>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">APP ID</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][envato][client_id]"
                               value="{{ old('settings.services.envato.client_id', setting('services.envato.client_id')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">APP Secret</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="settings[services][envato][client_secret]"
                               value="{{ old('settings.services.envato.client_secret', setting('services.envato.client_secret')) }}">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label class="col-sm-2 control-label">Valid OAuth Redirect URIs</label>
                    <div class="col-sm-6">
                        <div class="form-control bg-light">{{ url('/auth/envato/callback') }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<input type="hidden" id="active_tab" name="active_tab" value="{{ session('active_tab') ?? '' }}">

@push('scripts')
<script>
    $('#social-providers .accordion-collapse').on('shown.bs.collapse', function (e) {
        $('#active_tab').val($(e.target).attr('id'));
    });
</script>
@endpush
