@extends('admin.layouts.home')

@section('title', 'Dashboard')

@section('content')

    <div class="container-fluid p-0">
        <div class="content-wrapper p-3">
            <!-- Page Header with Breadcrumbs -->
            <div class="content-header mb-4">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-12">
                            <div class="card bg-primary text-white mb-3">
                                <div class="card-body py-4">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-lg rounded-circle bg-white text-primary me-3">
                                            <i class="bi bi-person-badge-fill fs-1"></i>
                                        </div>
                                        <div>
                                            <h1 class="m-0 fw-bold">Social Login Settings</h1>
                                            <nav aria-label="breadcrumb">
                                                <ol class="breadcrumb mb-0 text-white-50">
                                                    <li class="breadcrumb-item"><i class="bi bi-speedometer2 me-1"></i><a
                                                            href="index.html" class="text-white-50">Dashboard</a></li>
                                                    <li class="breadcrumb-item active text-white" aria-current="page">Social
                                                        Login Settings</li>
                                                </ol>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons Row -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-0">Social Login Configuration</h5>
                                    <p class="text-muted mb-0">Configure social login providers for your users</p>
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white py-3">
                            <div class="d-flex align-items-center">
                                <div class="icon-circle bg-primary text-white me-3">
                                    <i class="bi bi-person-check"></i>
                                </div>
                                <h5 class="card-title mb-0">Social Login Settings</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="social-settings-alert"></div>
                            <form class="social-settings" method="POST">
                                @php
                                    $settings = $settings ?? [];
                                    $settingAliases = [
                                        
                                        'chck-facebookLogin'   => 'facebookLogin',
                                        'chck-VkontakteLogin'  => 'VkontakteLogin',
                                        'chck-googleLogin'     => 'googleLogin',
                                        'chck-twitterLogin'    => 'twitterLogin',
                                        'chck-linkedinLogin'   => 'linkedinLogin',
                                        'chck-instagramLogin'  => 'instagramLogin',
                                        'chck-qqLogin'         => 'qqLogin',
                                        'chck-WeChatLogin'     => 'WeChatLogin',
                                        'chck-DiscordLogin'    => 'DiscordLogin',
                                        'chck-MailruLogin'     => 'MailruLogin',
                                        'chck-OkLogin'         => 'OkLogin',
                                        'chck-tiktok_login'    => 'tiktok_login',
                                        'chck-wordpress_login' => 'wordpressLogin',
                                        
                                        'facebookAppId'        => 'facebook_client_id',
                                        'facebookAppKey'       => 'facebook_client_secret',
                                    ];

                                    $getSetting = static function (string $key, $default = null) use ($settings, $settingAliases) {
                                        if (array_key_exists($key, $settings) && $settings[$key] !== null && $settings[$key] !== '') {
                                            return $settings[$key];
                                        }

                                        if (isset($settingAliases[$key])) {
                                            $aliasKey = $settingAliases[$key];

                                            if (array_key_exists($aliasKey, $settings) && $settings[$aliasKey] !== null && $settings[$aliasKey] !== '') {
                                                return $settings[$aliasKey];
                                            }
                                        }

                                        $value = setting($key, null);

                                        if ($value !== null && $value !== '') {
                                            return $value;
                                        }

                                        if (isset($settingAliases[$key])) {
                                            return setting($settingAliases[$key], $default);
                                        }

                                        return $default;
                                    };
                                @endphp
                                <!-- Facebook Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-facebookLogin" class="form-label fw-bold mb-0">Facebook
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Facebook account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-facebookLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-facebookLogin"
                                            id="chck-facebookLogin" value="1" @checked($getSetting('chck-facebookLogin', 0))>
                                    </div>
                                </div>

                                <!-- Vkontakte Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-VkontakteLogin" class="form-label fw-bold mb-0">Vkontakte
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Vkontakte account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-VkontakteLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-VkontakteLogin"
                                            id="chck-VkontakteLogin" value="1" @checked($getSetting('chck-VkontakteLogin', 0))>
                                    </div>
                                </div>

                                <!-- Google Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-googleLogin" class="form-label fw-bold mb-0">Google Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Google+ account, (App requires reviewing)</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-googleLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-googleLogin"
                                            id="chck-googleLogin" value="1" @checked($getSetting('chck-googleLogin', 0))>
                                    </div>
                                </div>

                                <!-- Twitter Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-twitterLogin" class="form-label fw-bold mb-0">Twitter Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Twitter account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-twitterLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-twitterLogin"
                                            id="chck-twitterLogin" value="1" @checked($getSetting('chck-twitterLogin', 0))>
                                    </div>
                                </div>

                                <!-- LinkedIn Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-linkedinLogin" class="form-label fw-bold mb-0">LinkedIn
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their LinkedIn account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-linkedinLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-linkedinLogin"
                                            id="chck-linkedinLogin" value="1" @checked($getSetting('chck-linkedinLogin', 0))>
                                    </div>
                                </div>

                                <!-- Instagram Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-instagramLogin" class="form-label fw-bold mb-0">Instagram
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Instagram account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-instagramLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-instagramLogin"
                                            id="chck-instagramLogin" value="1" @checked($getSetting('chck-instagramLogin', 0))>
                                    </div>
                                </div>

                                <!-- QQ Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-qqLogin" class="form-label fw-bold mb-0">QQ Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their QQ account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-qqLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-qqLogin" id="chck-qqLogin"
                                            value="1" @checked($getSetting('chck-qqLogin', 0))>
                                    </div>
                                </div>

                                <!-- WeChat Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-WeChatLogin" class="form-label fw-bold mb-0">WeChat Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their WeChat account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-WeChatLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-WeChatLogin"
                                            id="chck-WeChatLogin" value="1" @checked($getSetting('chck-WeChatLogin', 0))>
                                    </div>
                                </div>

                                <!-- Discord Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-DiscordLogin" class="form-label fw-bold mb-0">Discord
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Discord account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-DiscordLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-DiscordLogin"
                                            id="chck-DiscordLogin" value="1" @checked($getSetting('chck-DiscordLogin', 0))>
                                    </div>
                                </div>

                                <!-- Mailru Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-MailruLogin" class="form-label fw-bold mb-0">Mailru Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their Mailru account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-MailruLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-MailruLogin"
                                            id="chck-MailruLogin" value="1" @checked($getSetting('chck-MailruLogin', 0))>
                                    </div>
                                </div>

                                <!-- OK.ru Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-OkLogin" class="form-label fw-bold mb-0">OK.ru Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their OK.ru account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-OkLogin" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-OkLogin" id="chck-OkLogin"
                                            value="1" @checked($getSetting('chck-OkLogin', 0))>
                                    </div>
                                </div>

                                <!-- TikTok Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-3">
                                    <div>
                                        <label for="chck-tiktok_login" class="form-label fw-bold mb-0">TikTok
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their TikTok account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-tiktok_login" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-tiktok_login"
                                            id="chck-tiktok_login" value="1" @checked($getSetting('chck-tiktok_login', 0))>
                                    </div>
                                </div>

                                <!-- WordPress Login -->
                                <div class="mb-3 d-flex justify-content-between align-items-center">
                                    <div>
                                        <label for="chck-wordpress_login" class="form-label fw-bold mb-0">WordPress
                                            Login</label>
                                        <p class="text-muted mb-0 small">Enable the ability for users to login to your site
                                            using their WordPress account.</p>
                                    </div>
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="chck-wordpress_login" value="0">
                                        <input class="form-check-input" type="checkbox" name="chck-wordpress_login"
                                            id="chck-wordpress_login" value="1" @checked($getSetting('chck-wordpress_login', 0))>
                                    </div>
                                </div>

                                <input type="hidden" name="hash_id" value="00ddcc06d83d0faf07a6899229ca696359406f2a">
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 col-md-6">
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white py-3">
                            <div class="d-flex align-items-center">
                                <div class="icon-circle bg-primary text-white me-3">
                                    <i class="bi bi-key"></i>
                                </div>
                                <h5 class="card-title mb-0">Setup Social Login API Keys</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle me-2"></i> Please note that some websites may require app
                                verification.
                            </div>
                            <form class="api-settings" method="POST">
                                <!-- Facebook Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i class="bi bi-facebook fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Facebook Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="facebookAppId" class="form-label">Application ID</label>
                                        <input type="text" id="facebookAppId" name="facebookAppId"
                                            class="form-control" value="{{ $getSetting('facebookAppId', '') }}"
                                            placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="facebookAppKey" class="form-label">Application Secret Key</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="facebookAppKey" name="facebookAppKey"
                                            class="form-control" value="{{ $getSetting('facebookAppKey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- Google Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-danger p-2 me-2"><i class="bi bi-google fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Google Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="googleAppId" class="form-label">Client ID</label>
                                        <input type="text" id="googleAppId" name="googleAppId" class="form-control"
                                            value="{{ $getSetting('googleAppId', '') }}" placeholder="Client ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="googleAppKey" class="form-label">Client Secret Key</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="googleAppKey" name="googleAppKey" class="form-control"
                                            value="{{ $getSetting('googleAppKey', '') }}" placeholder="Client Secret Key">
                                    </div>
                                </div>

                                <!-- Twitter Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-info p-2 me-2"><i class="bi bi-twitter fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Twitter Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="twitterAppId" class="form-label">Consumer Key</label>
                                        <input type="text" id="twitterAppId" name="twitterAppId" class="form-control"
                                            value="{{ $getSetting('twitterAppId', '') }}" placeholder="Consumer Key">
                                    </div>
                                    <div class="mb-0">
                                        <label for="twitterAppKey" class="form-label">Consumer Secret</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="twitterAppKey" name="twitterAppKey"
                                            class="form-control" value="{{ $getSetting('twitterAppKey', '') }}"
                                            placeholder="Consumer Secret">
                                    </div>
                                </div>

                                <!-- LinkedIn Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i class="bi bi-linkedin fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">LinkedIn Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="linkedinAppId" class="form-label">Application ID</label>
                                        <input type="text" id="linkedinAppId" name="linkedinAppId"
                                            class="form-control" value="{{ $getSetting('linkedinAppId', '') }}"
                                            placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="linkedinAppKey" class="form-label">Application Secret Key</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="linkedinAppKey" name="linkedinAppKey"
                                            class="form-control" value="{{ $getSetting('linkedinAppKey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- Vkontakte Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i
                                                class="bi bi-chat-square-text-fill fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Vkontakte Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="VkontakteAppId" class="form-label">Application ID</label>
                                        <input type="text" id="VkontakteAppId" name="VkontakteAppId"
                                            class="form-control" value="{{ $getSetting('VkontakteAppId', '') }}"
                                            placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="VkontakteAppKey" class="form-label">Application Secret Key</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="VkontakteAppKey" name="VkontakteAppKey"
                                            class="form-control" value="{{ $getSetting('VkontakteAppKey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- Instagram Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-danger p-2 me-2"><i class="bi bi-instagram fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Instagram Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="instagramAppId" class="form-label">Application ID</label>
                                        <input type="text" id="instagramAppId" name="instagramAppId"
                                            class="form-control" value="{{ $getSetting('instagramAppId', '') }}"
                                            placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="instagramAppkey" class="form-label">Application Secret Key</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="instagramAppkey" name="instagramAppkey"
                                            class="form-control" value="{{ $getSetting('instagramAppkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- QQ Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-info p-2 me-2"><i
                                                class="bi bi-chat-dots-fill fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">QQ Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="qqAppId" class="form-label">Application ID</label>
                                        <input type="text" id="qqAppId" name="qqAppId" class="form-control"
                                            value="{{ $getSetting('qqAppId', '') }}" placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="qqAppkey" class="form-label">Application Secret Key</label>
                                        <input type="text" id="qqAppkey" name="qqAppkey" class="form-control"
                                            value="{{ $getSetting('qqAppkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- WeChat Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-success p-2 me-2"><i
                                                class="bi bi-chat-square-text-fill fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">WeChat Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="WeChatAppId" class="form-label">Application ID</label>
                                        <input type="text" id="WeChatAppId" name="WeChatAppId" class="form-control"
                                            value="{{ $getSetting('WeChatAppId', '') }}" placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="WeChatAppkey" class="form-label">Application Secret Key</label>
                                        <input type="text" id="WeChatAppkey" name="WeChatAppkey" class="form-control"
                                            value="{{ $getSetting('WeChatAppkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- Discord Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i class="bi bi-discord fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Discord Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="DiscordAppId" class="form-label">Application ID</label>
                                        <input type="text" id="DiscordAppId" name="DiscordAppId" class="form-control"
                                            value="{{ $getSetting('DiscordAppId', '') }}" placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="DiscordAppkey" class="form-label">Application Secret Key</label>
                                        <div class="alert alert-danger py-2 mb-2">
                                            <i class="bi bi-shield-lock me-2"></i> The secret key is not showing due
                                            security reasons, you can still overwrite the current one.
                                        </div>
                                        <input type="text" id="DiscordAppkey" name="DiscordAppkey"
                                            class="form-control" value="{{ $getSetting('DiscordAppkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- Mailru Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i
                                                class="bi bi-envelope-fill fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">Mailru Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="MailruAppId" class="form-label">Application ID</label>
                                        <input type="text" id="MailruAppId" name="MailruAppId" class="form-control"
                                            value="{{ $getSetting('MailruAppId', '') }}" placeholder="Application ID">
                                    </div>
                                    <div class="mb-0">
                                        <label for="MailruAppkey" class="form-label">Application Secret Key</label>
                                        <input type="text" id="MailruAppkey" name="MailruAppkey" class="form-control"
                                            value="{{ $getSetting('MailruAppkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- OK.ru Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i
                                                class="bi bi-chat-square-fill fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">OK.ru Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="OkAppId" class="form-label">Application ID</label>
                                        <input type="text" id="OkAppId" name="OkAppId" class="form-control"
                                            value="{{ $getSetting('OkAppId', '') }}" placeholder="Application ID">
                                    </div>
                                    <div class="mb-3">
                                        <label for="OkAppPublickey" class="form-label">Application Public Key</label>
                                        <input type="text" id="OkAppPublickey" name="OkAppPublickey"
                                            class="form-control" value="{{ $getSetting('OkAppPublickey', '') }}"
                                            placeholder="Application Public Key">
                                    </div>
                                    <div class="mb-0">
                                        <label for="OkAppSecretkey" class="form-label">Application Secret Key</label>
                                        <input type="text" id="OkAppSecretkey" name="OkAppSecretkey"
                                            class="form-control" value="{{ $getSetting('OkAppSecretkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <!-- TikTok Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-dark p-2 me-2"><i class="bi bi-tiktok fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">TikTok Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="tiktok_client_key" class="form-label">Client Key</label>
                                        <input type="text" id="tiktok_client_key" name="tiktok_client_key"
                                            class="form-control" value="{{ $getSetting('tiktok_client_key', '') }}"
                                            placeholder="Client key">
                                    </div>
                                    <div class="mb-0">
                                        <label for="tiktok_client_secret" class="form-label">Client Secret</label>
                                        <input type="text" id="tiktok_client_secret" name="tiktok_client_secret"
                                            class="form-control" value="{{ $getSetting('tiktok_client_secret', '') }}"
                                            placeholder="Client secret">
                                    </div>
                                </div>

                                <!-- WordPress Configuration -->
                                <div class="mb-4 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center mb-3">
                                        <span class="badge bg-primary p-2 me-2"><i
                                                class="bi bi-wordpress fs-5"></i></span>
                                        <h6 class="mb-0 fw-bold">WordPress Configuration</h6>
                                    </div>
                                    <div class="mb-3">
                                        <label for="WordPressAppId" class="form-label">Application Public Key</label>
                                        <input type="text" id="WordPressAppId" name="WordPressAppId"
                                            class="form-control" value="{{ $getSetting('WordPressAppId', '') }}"
                                            placeholder="Application Public Key">
                                    </div>
                                    <div class="mb-0">
                                        <label for="WordPressAppkey" class="form-label">Application Secret Key</label>
                                        <input type="text" id="WordPressAppkey" name="WordPressAppkey"
                                            class="form-control" value="{{ $getSetting('WordPressAppkey', '') }}"
                                            placeholder="Application Secret Key">
                                    </div>
                                </div>

                                <input type="hidden" name="hash_id" value="00ddcc06d83d0faf07a6899229ca696359406f2a">
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Save Changes Button -->
            <div class="row mt-3 mb-4">
                <div class="col-12">
                    <div class="card bg-light">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="mb-0"><i class="bi bi-info-circle me-1"></i> Changes will be applied to
                                        all social login providers immediately.</p>
                                </div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('admin.update_settings')
@endsection