@php
/**
* Refactored General Settings Blade template
* - Improved layout and accessibility
* - Replaced raw PHP tags with Blade syntax
* - Added CSRF tokens to forms
* - Added Zero-decimal currency UI (was referenced by JS but missing)
* - Defensive JS initialisation (checks for jQuery, lodash, selectize)
* - Encapsulated scripts inside DOMContentLoaded
*/
$appDefaultStyles = config('__settings.items.application_styles_and_colors');
$darkThemeAppColorStyles = config('__settings.items.application_dark_theme_styles_and_colors');
$skipItems = ['disable_bg_image', 'allow_to_change_theme'];
@endphp

<style>
    /* Design-only: small visual polish */
    .lw-fieldset {
        padding: 1rem;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        background: #fff;
    }

    .form-control-user {
        padding: .5rem .75rem;
    }

    .input-group-text {
        min-width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mt-5-5 {
        margin-top: 4rem;
    }

    /* Make selectize look tidy if it replaces the select */
    #lwSelectCurrency.selectized {
        width: 100% !important;
    }

    /* responsive tweak for mobile blocks */
    @media (max-width: 576px) {
        .lw-btn-block-mobile {
            width: 100%;
            display: block;
        }
    }

    /* small visual tweak for uploader preview (if plugin uses this id) */
    .lw-uploader-preview {
        max-height: 52px;
        object-fit: contain;
    }

    /* Container for tabs with rounded pill look */
    .custom-tabs {
        display: inline-flex !important;
        border-radius: 50px !important;
        background-color: #e0e0e0 !important;
        /* Light gray for inactive tabs */
        padding: 3px !important;
        overflow: hidden !important;
    }

    /* Individual tabs */
    .custom-tabs .nav-link {
        border: none !important;
        border-radius: 50px !important;
        margin: 0px 2px !important;
        color: #000 !important;
        background-color: transparent !important;
        transition: all 0.3s !important;
    }

    /* Active tab */
    .custom-tabs .nav-link.active {
        background-color: #333 !important;
        /* Dark background like image */
        color: #fff !important;
    }

    /* Hover effect for non-active tabs */
    .custom-tabs .nav-link:not(.active):hover {
        background-color: #d3d3d3 !important;
    }
</style>


<!-- Settings Tabs -->
<div class="mb-3 d-flex justify-content-between align-items-center flex-wrap">
    <!-- Left side: Nav Tabs -->
    <ul class="nav nav-tabs custom-tabs ml-0 mt-0" id="settingsTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active pb-2 pt-2" href="#tab-general" data-tab-target="general" role="tab">General</a>
        </li>
        <li class="nav-item">
            <a class="nav-link pb-2 pt-2" href="#tab-social" data-tab-target="social" role="tab">Social Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link pb-2 pt-2" href="#misc" data-tab-target="misc" role="tab">Misc & Email</a>
        </li>
    </ul>

    <!-- Right side: Clear Optimizations Button + Info -->
    <div class="d-flex align-items-center gap-2">
        <span class="text-muted" data-bs-toggle="tooltip" data-bs-placement="right"
            title="{{ __tr('This will clear many types of cache like routes, config, views, etc.') }}">
            <i class="fa fa-info-circle fs-5"></i>
        </span>
        <a href="{{ route('manage.operations.clear_optimize.write') }}"
            class="btn btn-danger btn-sm lw-ajax-link-action"
            data-method="post"
            data-confirm="{{ __tr('Are you sure you want to clear app optimizations?') }}">
            {{ __tr('Clear Optimizations') }}
        </a>
    </div>
</div>



<style>
    /* Tabs visibility */
    .lw-tab-pane {
        display: none;
    }

    .lw-tab-pane.active {
        display: block;
    }

    #lwUploadLogo,
    #lwUploadDarkThemeLogo,
    #lwUploadSmallLogo,
    #lwUploadDarkThemeSmallLogo,
    #lwUploadFavicon,
    #lwUploadDarkThemeFavicon {
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #fff;
        border-radius: 6px;
        align-items: flex-start;
    }

    #lwUploadLogo img,
    #lwUploadDarkThemeLogo img,
    #lwUploadSmallLogo img,
    #lwUploadDarkThemeSmallLogo img,

    #lwUploadFavicon img,
    #lwUploadDarkThemeFavicon img {
        max-width: 100%;
        /* image won’t overflow container */
        max-height: 100%;
        /* keep aspect ratio */
        width: auto;
        /* don’t stretch */
        height: auto;
        /* keep natural proportion */
        object-fit: contain;
        display: block;
    }

    .filepond--root.fullclickable {
        cursor: pointer;
        position: relative;
    }

    /* stretch FilePond's file input to cover the whole root box */
    .filepond--root.fullclickable .filepond--browser {
        position: relative !important;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 20;
    }

    /* small change button when image exists */
    .filepond--root .file-change-btn {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 30;
        padding: .25rem .5rem;
        font-size: .8rem;
        border-radius: .25rem;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        border: 0;
        cursor: pointer;
    }

    .filepond--root .file-change-btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.15);
    }
    .filepond--list-scroller[data-state=overflow] {
        overflow-y: hidden;
        overflow-x: hidden;
    }
</style>

<div id="settingsTabContent">
    <div id="tab-general" class="lw-tab-pane active" data-tab="general">
        <form class="lw-ajax-form lw-form" method="post" action="{{ route('manage.configuration.write', ['pageType' => request()->pageType]) }}">
            @csrf
            <div class="card border-0 shadow-lg mb-4">
                <div class="card-header justify-content-between d-flex align-items-center flex-wrap">
                    <h5 class="m-0 fw-bold text-dark">{{ __tr('Theme & Branding') }}</h5>
                    <small class="text-muted">
                        {{ __tr('File uploads will be processed automatically upon valid selection.') }}
                    </small>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <!-- Light Theme -->
                        <div class="col-12 col-lg-6 col-md-12 border-lg-start">
                            <div class="mb-4 pb-4">
                                <h6 class="text-uppercase fw-bold text-secondary mb-3">{{ __tr('Light Theme') }}</h6>
                                <div class="row g-3">
                                    <div class="col-12 col-sm-6 col-md-4 mb-2">
                                        <label for="lwUploadLogo" class="form-label mb-2">{{ __tr('Logo') }}</label>
                                        <input type="file" data-lw-plugin="lwUploader" data-label-idle="{{ __tr('Select New Logo') }}" data-allow-revert="true" data-instant-upload="true" data-action="{{ route('media.upload_logo') }}" id="lwUploadLogo" data-callback="afterUploadedFile" data-default-image-url="{{ getAppSettings('logo_image_url') }}" class="form-control-file" />
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-4 mb-2">
                                        <label for="lwUploadSmallLogo" class="form-label mb-2">{{ __tr('Small Logo') }}</label>
                                        <input type="file" data-lw-plugin="lwUploader" data-label-idle="{{ __tr('Select Small Logo') }}" data-allow-revert="true" data-instant-upload="true" data-action="{{ route('media.upload_small_logo') }}" id="lwUploadSmallLogo" data-callback="afterUploadedFile" data-default-image-url="{{ getAppSettings('small_logo_image_url') }}" class="form-control-file" />
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-4 mb-2">
                                        <label for="lwUploadFavicon" class="form-label mb-2">{{ __tr('Favicon') }}</label>
                                        <input type="file" data-lw-plugin="lwUploader" data-label-idle="{{ __tr('Select New Favicon') }}" data-instant-upload="true" data-action="{{ route('media.upload_favicon') }}" data-callback="afterUploadedFile" id="lwUploadFavicon" data-default-image-url="{{ getAppSettings('favicon_image_url') }}" class="form-control-file" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Dark Theme -->
                        <div class="col-12 col-lg-6 border-left">
                            <div class="mb-4 pb-4">
                                <h6 class="text-uppercase fw-bold text-secondary mb-3">{{ __tr('Dark Theme') }}</h6>
                                <div class="row g-3">
                                    <div class="col-12 col-sm-6 col-md-4 mb-2">
                                        <label for="lwUploadDarkThemeLogo" class="form-label mb-2">{{ __tr('Logo') }}</label>
                                        <input type="file" data-lw-plugin="lwUploader" data-label-idle="{{ __tr('Select New Logo') }}" data-allow-revert="true" data-instant-upload="true" data-action="{{ route('media.dark.theme.upload_logo') }}" id="lwUploadDarkThemeLogo" data-callback="afterUploadedFile" data-default-image-url="{{ getAppSettings('dark_theme_logo_image_url') }}" class="form-control-file" />
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-4 mb-2">
                                        <label for="lwUploadDarkThemeSmallLogo" class="form-label mb-2">{{ __tr('Small Logo') }}</label>
                                        <input type="file" data-lw-plugin="lwUploader" data-label-idle="{{ __tr('Select Small Logo') }}" data-allow-revert="true" data-instant-upload="true" data-action="{{ route('media.dark.theme.upload_small_logo') }}" id="lwUploadDarkThemeSmallLogo" data-callback="afterUploadedFile" data-default-image-url="{{ getAppSettings('dark_theme_small_logo_image_url') }}" class="form-control-file" />
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-4 mb-2">
                                        <label for="lwUploadDarkThemeFavicon" class="form-label mb-2">{{ __tr('Favicon') }}</label>
                                        <input type="file" data-lw-plugin="lwUploader" data-label-idle="{{ __tr('Select New Favicon') }}" data-instant-upload="true" data-action="{{ route('media.dark.theme.upload_favicon') }}" data-callback="afterUploadedFile" id="lwUploadDarkThemeFavicon" data-default-image-url="{{ getAppSettings('dark_theme_favicon_image_url') }}" class="form-control-file" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <!-- Website Details -->
                <div class="col-lg-4 col-md-12 col-sm-12 mb-4">
                    <div class="card border-0 shadow-lg h-100 d-flex flex-column">
                        <div class="card-header">
                            <h5 class="m-0 fw-bold text-dark">{{ __tr('Website Details') }}</h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-3">
                                <label for="lwWebsiteName" class="form-label">{{ __tr('Your Website Name') }}</label>
                                <input type="text" class="form-control" name="name" id="lwWebsiteName" value="{{ $configurationData['name'] ?? '' }}" required>
                            </div>
                            <div class="mb-3">
                                <label for="lwWebsiteDescription" class="form-label">{{ __tr('Your Website Description') }}</label>
                                <textarea name="description" id="lwWebsiteDescription" class="form-control" rows="3">{{ $configurationData['description'] ?? '' }}</textarea>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0 text-end">
                            <button type="button" class="btn btn-primary lw-ajax-form-submit-action float-right">
                                {{ __tr('Save') }}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Contact Settings -->
                <div class="col-lg-4 col-md-12 col-sm-12 mb-4">
                    <div class="card border-0 shadow-lg h-100 d-flex flex-column">
                        <div class="card-header">
                            <h5 class="m-0 fw-bold text-dark">{{ __tr('Contact Settings') }}</h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-3">
                                <label for="lwContactEmail" class="form-label">{{ __tr('Contact Email') }}</label>
                                <input type="email" class="form-control" name="contact_email" id="lwContactEmail" value="{{ $configurationData['contact_email'] ?? '' }}">
                                <small class="form-text text-muted">{{ __tr('This email will be used to receive messages from the contact form.') }}</small>
                            </div>
                            <div class="mb-3">
                                <label for="lwContactDetails" class="form-label">{{ __tr('Contact Details') }}</label>
                                <textarea class="form-control" name="contact_details" rows="4" id="lwContactDetails">{{ $configurationData['contact_details'] ?? '' }}</textarea>
                                <small class="form-text text-muted">{{ __tr('Details entered here will be displayed on the contact page.') }}</small>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0 text-end">
                            <button type="button" class="btn btn-primary lw-ajax-form-submit-action float-right">
                                {{ __tr('Save') }}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Localization -->
                <div class="col-lg-4 col-md-12 col-sm-12 mb-4">
                    <div class="card border-0 shadow-lg h-100 d-flex flex-column">
                        <div class="card-header">
                            <h5 class="m-0 fw-bold text-dark">{{ __tr('Localization') }}</h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-3">
                                <label for="lwSelectTimezone" class="form-label">{{ __tr('Select Timezone') }}</label>
                                <select data-lw-plugin="lwSelectize" data-label-field="name" data-selected="{{ $configurationData['timezone'] ?? '' }}" data-search-field="{{ json_encode(['id','name']) }}" data-value-field="id" id="lwSelectTimezone" class="form-control" name="timezone" required>
                                    @foreach($configurationData['timezone_list'] ?? [] as $timezone)
                                    <option value="{{ $timezone['value'] }}">{{ $timezone['text'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="lwSelectDefaultLanguage" class="form-label">{{ __tr('Default Language') }}</label>
                                <select id="lwSelectDefaultLanguage" data-lw-plugin="lwSelectize" placeholder="Default Language..." name="default_language" class="form-control">
                                    @if(!__isEmpty($configurationData['languageList'] ?? []))
                                    @foreach($configurationData['languageList'] as $key => $language)
                                    <option value="{{ $language['id'] }}" {{ ($configurationData['default_language'] ?? '') == $language['id'] ? 'selected' : '' }}>{{ $language['name'] }}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0 text-end">
                            <button type="button" class="btn btn-primary lw-ajax-form-submit-action float-right">
                                {{ __tr('Save') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>




        </form>
        <div class="row">
            <!-- Currency Card -->
            <div class="col-lg-6 mb-4">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-header">
                        <h5 class="m-0 fw-bold text-dark">{{ __tr('Currency') }}</h5>
                    </div>
                    <div class="card-body p-4">
                        <!-- Currency Setting Form -->
                        <form id="form1" class="lw-ajax-form lw-form" name="currency_setting_form"
                            method="post"
                            action="{{ route('manage.configuration.write', ['pageType' => request()->pageType]) }}">
                            @csrf
                            <input type="hidden" name="form_type" value="currency_form" />

                            <div class="form-group mt-2">
                                <label for="lwSelectCurrency">{{ __tr('Select Currency') }}</label>
                                <select id="lwSelectCurrency" name="currency" class="form-control" required aria-label="{{ __tr('Select a Currency') }}">
                                    <option value="">{{ __tr('Select a Currency ...') }}</option>
                                    @if(!__isEmpty($configurationData['currency_options'] ?? []))
                                    @foreach($configurationData['currency_options'] as $key => $currency)
                                    <option value="{{ $currency['currency_code'] }}" {{ ($configurationData['currency'] ?? '') == $currency['currency_code'] ? 'selected' : '' }}>
                                        {{ $currency['currency_name'] }}
                                    </option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>

                            <div class="form-group row">
                                <!-- Currency Code -->
                                <div class="col-sm-6 mb-3 mb-sm-0">
                                    <label for="lwCurrencyCode">{{ __tr('Currency Code') }}</label>
                                    <input type="text" class="form-control form-control-user"
                                        value="{{ $configurationData['currency_value'] ?? '' }}"
                                        id="lwCurrencyCode" name="currency_value"
                                        placeholder="{{ __tr('e.g. USD, INR') }}" required>
                                </div>

                                <!-- Currency Symbol -->
                                <div class="col-sm-6 mb-3 mb-sm-0">
                                    <label for="lwCurrencySymbol">{{ __tr('Currency Symbol') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control form-control-user"
                                            value="{!! htmlentities($configurationData['currency_symbol'] ?? '') !!}"
                                            id="lwCurrencySymbol" name="currency_symbol"
                                            placeholder="{{ __tr('Symbol or ASCII (e.g. $)') }}" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="lwCurrencySymbolAddon">{{ $configurationData['currency_symbol'] ?? '' }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Zero-decimal switch -->
                            <div class="form-group mt-3 d-flex align-items-center">
                                <div class="form-check form-switch me-3">
                                    <input class="form-check-input" type="checkbox" id="lwZeroDecimalSwitch"
                                        name="zero_decimal"
                                        {{ (!empty($configurationData['currency_zero_decimal']) ? 'checked' : '') }}>
                                    <label class="form-check-label" for="lwZeroDecimalSwitch">{{ __tr('Zero-decimal currency') }}</label>
                                </div>
                                <small id="lwZeroDecimalExist" class="form-text text-muted ms-2" style="display:none">
                                    {{ __tr('Selected currency uses zero decimal places (e.g. JPY).') }}
                                </small>
                                <small id="lwZeroDecimalNotExist" class="form-text text-muted ms-2" style="display:none">
                                    {{ __tr('Selected currency uses decimals (e.g. USD).') }}
                                </small>
                            </div>

                            <!-- Save Button -->
                            <div class="mt-4 text-end">
                                <button type="button" class="btn btn-primary lw-ajax-form-submit-action lw-ajax-form-submit-action btn-user lw-btn-block-mobile">
                                    {{ __tr('Save') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Disposable Email Usages Card -->
            <div class="col-lg-6 mb-4">
                <div class="card border-0 shadow-lg h-100">
                    <div class="card-header">
                        <h5 class="m-0 fw-bold text-dark">{{ __tr('Disposable Email Usages') }}</h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="mb-3">
                            <x-lw.checkbox
                                :offValue="0"
                                id="lwDisallowDisposableEmail"
                                name="disallow_disposable_emails"
                                data-lw-plugin="lwSwitchery"
                                data-color="orange"
                                :checked="getAppSettings('disallow_disposable_emails')"
                                :label="__tr('Disallow Disposable Emails Usages')"
                                value="1" />
                        </div>
                        <small class="text-muted d-block">
                            <strong>{{ __tr('Note:') }}</strong>
                            {{ __tr('It will disallow users from using disposable emails like Mailinator, Guerillamail, etc., for user registration, contact forms, and more.') }}
                        </small>
                    </div>
                </div>
            </div>
        </div>

    </div> <!-- /#tab-general -->



    <div id="tab-social" class="lw-tab-pane" data-tab="social">
        <div class="row g-4">
            <!-- Google Card -->
            <div class="col-12 col-lg-6">
                <form x-data="{ allow_google_login: {{ getAppSettings('allow_google_login') ? 1 : 0 }} }"
                    class="lw-ajax-form lw-form h-100"
                    method="post"
                    data-callback="onSocialLoginFormCallback"
                    action="{{ route('manage.configuration.write', ['pageType' => request()->pageType]) }}">
                    @csrf
                    <div class="card h-100 shadow-lg">
                        <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                            <div class="custom-control custom-checkbox m-0 d-flex align-items-center">
                                <input type="hidden" name="allow_google_login" value="0" />
                                <input type="checkbox"
                                    class="custom-control-input"
                                    id="lwAllowGoogleLogin"
                                    name="allow_google_login"
                                    value="1"
                                    x-model="allow_google_login">
                                <label class="custom-control-label ms-2" for="lwAllowGoogleLogin">
                                    {{ __tr('Allow Google Login') }}
                                </label>
                            </div>
                            <div class="d-flex align-items-center mt-2 mt-lg-0">
                                <h6 class="mb-0 me-3">{{ __tr('Google Login') }}</h6>
                                <small class="mb-0 text-primary ms-2">{{ __tr('Configure OAuth keys') }}</small>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="mb-3">
                                <label for="lwGoogleClientId">{{ __tr('Google Client ID') }}</label>
                                <input type="text" class="form-control"
                                    name="google_client_id"
                                    id="lwGoogleClientId"
                                    placeholder="{{ __tr('Add Your Google Client ID') }}"
                                    value="{{ e($configurationData['google_client_id'] ?? '') }}"
                                    :readonly="!allow_google_login">
                            </div>

                            <div class="mb-3">
                                <label for="lwGoogleClientSecret">{{ __tr('Google Client Secret') }}</label>
                                <input type="text" class="form-control"
                                    name="google_client_secret"
                                    id="lwGoogleClientSecret"
                                    placeholder="{{ __tr('Add Your Google Client Secret') }}"
                                    value="{{ e($configurationData['google_client_secret'] ?? '') }}"
                                    :readonly="!allow_google_login">
                            </div>

                            <div class="mb-3">
                                <label for="lwGoogleCallbackUrl">{{ __tr('Callback URL') }}</label>
                                <div class="input-group">
                                    <input type="text" class="form-control"
                                        id="lwGoogleCallbackUrl"
                                        value="{{ route('login.google.callback') }}"
                                        readonly
                                        onclick="copyText('#lwGoogleCallbackUrl')">
                                    <button class="btn btn-outline-secondary" type="button" onclick="copyText('#lwGoogleCallbackUrl')">Copy</button>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer text-end">
                            <button type="button" class="lw-ajax-form-submit-action float-right btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Facebook Card -->
            <div class="col-12 col-lg-6">
                <form x-data="{ allow_facebook_login: {{ getAppSettings('allow_facebook_login') ? 1 : 0 }} }"
                    class="lw-ajax-form lw-form h-100"
                    method="post"
                    data-callback="onSocialLoginFormCallback"
                    action="{{ route('manage.configuration.write', ['pageType' => request()->pageType]) }}">
                    @csrf
                    <div class="card h-100 shadow-lg">
                        <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                            <div class="custom-control custom-checkbox m-0 d-flex align-items-center">
                                <input type="hidden" name="allow_facebook_login" value="0" />
                                <input type="checkbox"
                                    class="custom-control-input"
                                    id="lwAllowFacebookLogin"
                                    name="allow_facebook_login"
                                    value="1"
                                    x-model="allow_facebook_login">
                                <label class="custom-control-label ms-2" for="lwAllowFacebookLogin">
                                    {{ __tr('Allow Facebook Login') }}
                                </label>
                            </div>
                            <div class="d-flex align-items-center mt-2 mt-lg-0">
                                <h6 class="mb-0 me-3">{{ __tr('Facebook Login') }}</h6>
                                <small class="mb-0 text-primary ms-2">{{ __tr('Configure OAuth keys') }}</small>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="mb-3">
                                <label for="lwFacebookClientId">{{ __tr('Facebook Client ID') }}</label>
                                <input type="text" class="form-control"
                                    name="facebook_client_id"
                                    id="lwFacebookClientId"
                                    placeholder="{{ __tr('Add Your Facebook Client ID') }}"
                                    value="{{ e($configurationData['facebook_client_id'] ?? '') }}"
                                    :readonly="!allow_facebook_login">
                            </div>

                            <div class="mb-3">
                                <label for="lwFacebookClientSecret">{{ __tr('Facebook Client Secret') }}</label>
                                <input type="text" class="form-control"
                                    name="facebook_client_secret"
                                    id="lwFacebookClientSecret"
                                    placeholder="{{ __tr('Add Your Facebook Client Secret') }}"
                                    value="{{ e($configurationData['facebook_client_secret'] ?? '') }}"
                                    :readonly="!allow_facebook_login">
                            </div>

                            <div class="mb-3">
                                <label for="lwFacebookCallbackUrl">{{ __tr('Callback URL') }}</label>
                                <div class="input-group">
                                    <input type="text" class="form-control"
                                        id="lwFacebookCallbackUrl"
                                        value="{{ route('login.facebook.callback') }}"
                                        readonly
                                        onclick="copyText('#lwFacebookCallbackUrl')">
                                    <button class="btn btn-outline-secondary" type="button" onclick="copyText('#lwFacebookCallbackUrl')">Copy</button>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer text-end">
                            <button type="button" class="lw-ajax-form-submit-action float-right btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        function copyText(selector) {
            const el = document.querySelector(selector);
            if (!el) return;
            el.select ? el.select() : navigator.clipboard.writeText(el.value);
            if (el.select) document.execCommand('copy');
            else navigator.clipboard.writeText(el.value);
        }
    </script>
    <!-- /#tab-social -->
    <div id="misc" class="lw-tab-pane" data-tab="misc">

        <!-- Home Page Settings -->
        <div class="row g-1">
            <!-- Home Page Settings -->
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <h2 class="card-header">{{ __tr('Home Page Settings') }}</h2>
                    <form class="lw-ajax-form lw-form"
                        method="post"
                        action="{{ route('manage.configuration.write', ['pageType' => 'misc_settings']) }}">
                        <div class="card-body">
                            @csrf
                            <div class="row">
                                <x-lw.input-field type="selectize" data-form-group-class="col-12"
                                    name="current_home_page_view"
                                    data-selected="{{ getAppSettings('current_home_page_view') }}"
                                    :label="__tr('Select home page')"
                                    placeholder="{{ __tr('Select home page') }}" required>
                                    <x-slot name="selectOptions">
                                        @foreach ([
                                        'outer-home' => __tr('Home Page 1'),
                                        'outer-home-2' => __tr('Home Page 2'),
                                        'outer-home-3' => __tr('Home Page 3'),
                                        ] as $key => $label)
                                        <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>

                                <div class="col-12 text-center my-2">
                                    <h6 class="text-muted m-0">{{ __tr('------- OR -------') }}</h6>
                                </div>

                                <div class="col-12">
                                    <label for="lwOtherHomePageUrl">{{ __tr('External Home page') }}</label>
                                    <input type="url" class="form-control" id="lwOtherHomePageUrl"
                                        name="other_home_page_url"
                                        value="{{ getAppSettings('other_home_page_url') }}"
                                        placeholder="{{ __tr('Set home page URL') }}">
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex justify-content-end mt-3">
                                <button type="button" class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Excel Contacts Import Limit -->
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <h2 class="card-header">{{ __tr('Excel Contacts Import Limit') }}</h2>
                    <form class="lw-ajax-form lw-form"
                        method="post"
                        action="{{ route('manage.configuration.write', ['pageType' => 'misc_settings']) }}">
                        <div class="card-body">
                            @csrf
                            <x-lw.input-field type="number" min="0"
                                data-form-group-class="col-12"
                                :label="__tr('Number of Contacts')"
                                name="contacts_import_limit_per_request"
                                value="{{ getAppSettings('contacts_import_limit_per_request') }}"
                                :helpText="__tr('Set the limit of the contacts vendors can import in a single request')"
                                required />
                        </div>
                        <div class="card-footer mt-5-5">
                            <div class="d-flex justify-content-end mt-3">
                                <button type="button" class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Background Setup -->
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <h2 class="card-header">{{ __tr('Background setup') }}</h2>
                    <form class="lw-ajax-form lw-form"
                        method="post"
                        action="{{ route('manage.configuration.write', ['pageType' => 'misc_settings']) }}">
                        <div class="card-body">
                            @csrf
                            <div class="mb-3">
                                <x-lw.checkbox id="disableBgImage" name="disable_bg_image"
                                    :offValue="0" :checked="getAppSettings('disable_bg_image')"
                                    data-lw-plugin="lwSwitchery"
                                    :label="__tr('Disable Background Image')" />
                            </div>
                            <div class="mb-3">
                                <x-lw.checkbox id="allowChangeTheme" name="allow_to_change_theme"
                                    :offValue="0" :checked="getAppSettings('allow_to_change_theme')"
                                    data-lw-plugin="lwSwitchery"
                                    :label="__tr('Allow User To Change Theme')" />
                            </div>

                            <div class="mb-3">
                                <label for="lwSelectDefaultTheme">{{ __tr('Default Mode') }}</label>
                                <select id="lwSelectDefaultTheme" name="current_app_theme"
                                    class="form-control" onchange="updateTheme(this.value)">
                                    @foreach (configItem('theme_options') as $themeKey => $theme)
                                    <option value="{{ $themeKey }}"
                                        {{ $themeKey === getAppSettings('current_app_theme') ? 'selected' : '' }}>
                                        {{ $theme }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                        <div class="card-footer">
                            <div class="d-flex justify-content-end mt-3">
                                <button type="button" class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <!-- Choose your colors -->
        <div class="card mb-4">
            <h2 class="card-header" id="miscHeadingFour">
                {{ __tr('Choose your colors') }}
            </h2>
            <div id="miscCollapseFour" aria-labelledby="miscHeadingFour"
                data-parent="#miscAccordion">
                <div class="card-body">
                    <h2 class="card-header pl-0" id="miscHeadingFour">
                        {{ __tr('Light Theme Colors') }}
                    </h2>
                    <form class="lw-ajax-form lw-form" data-show-processing="true" method="post"
                        action="{{ route('manage.configuration.write', ['pageType' => 'application_styles_and_colors']) }}"
                        x-data="{
                        @foreach ($appDefaultStyles as $styleItem)
                        '{{ $styleItem['key'] }}':'{{ getAppSettings($styleItem['key']) }}', @endforeach
                    }">
                        <input type="hidden" name="pageType" value="application_styles_and_colors">
                        <div class="row">
                            @foreach ($appDefaultStyles as $styleItem)
                            @if (in_array($styleItem['key'], $skipItems)) @continue @endif
                            <x-lw.input-field
                                data-form-group-class="col-xl-2 col-lg-3 col-sm-6 col-md-6 mb-3 pl-3"
                                type="color"
                                x-model="{{ $styleItem['key'] }}"
                                :label="$styleItem['title']"
                                data-default="{{ $styleItem['default'] }}"
                                name="{{ $styleItem['key'] }}"
                                required />
                            @endforeach
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <button type="button"
                                @click="__DataRequest.updateModels({@foreach ($appDefaultStyles as $styleItem)'{{ $styleItem['key'] }}':'{{ $styleItem['default'] }}', @endforeach});"
                                class="btn btn-secondary px-4 shadow-sm mr-2">
                                {{ __tr('Reset to Default') }}
                            </button>
                            <button type="button" class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                        </div>
                    </form>
                    <h2 class="card-header pl-0" id="miscHeadingFive">
                        {{ __tr('Dark Theme Colors') }}
                    </h2>
                    <form class="lw-ajax-form lw-form" data-show-processing="true" method="post"
                        action="{{ route('manage.configuration.write', ['pageType' => 'application_dark_theme_styles_and_colors']) }}"
                        x-data="{
                        @foreach ($darkThemeAppColorStyles as $styleItem)
                        '{{ $styleItem['key'] }}':'{{ getAppSettings($styleItem['key']) }}', @endforeach
                    }">
                        <input type="hidden" name="pageType" value="application_dark_theme_styles_and_colors">
                        <div class="row">
                            @foreach ($darkThemeAppColorStyles as $styleItem)
                            @if (in_array($styleItem['key'], $skipItems)) @continue @endif
                            <x-lw.input-field
                                data-form-group-class="col-xl-2 col-lg-3 col-sm-6 col-md-6 mb-3 pl-3"
                                type="color"
                                x-model="{{ $styleItem['key'] }}"
                                :label="$styleItem['title']"
                                data-default="{{ $styleItem['default'] }}"
                                name="{{ $styleItem['key'] }}"
                                required />
                            @endforeach
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <button type="button"
                                @click="__DataRequest.updateModels({@foreach ($darkThemeAppColorStyles as $styleItem)'{{ $styleItem['key'] }}':'{{ $styleItem['default'] }}', @endforeach});"
                                class="btn btn-secondary px-4 shadow-sm mr-2">
                                {{ __tr('Reset to Default') }}
                            </button>
                            <button type="button" class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Head Code -->
        <div class="card mb-4">
            <h2 class="card-header" id="miscHeadingSix">
                {{ __tr('Head Code') }}
            </h2>
            <div id="miscCollapseSix" aria-labelledby="miscHeadingSix"
                data-parent="#miscAccordion">
                <div class="card-body">
                    <form class="lw-ajax-form lw-form"
                        method="post"
                        action="{{ route('manage.configuration.write', ['pageType' => 'misc_settings']) }}">
                        <div class="alert alert-light">
                            {{ __tr('You can place any script, css, styles etc. to the head tag here.') }}
                        </div>
                        <textarea rows="8" class="form-control" name="page_head_code"
                            placeholder="{{ __tr('You can add your required js/html code etc') }}">{!! getAppSettings('page_head_code') !!}</textarea>
                        <div class="d-flex justify-content-end mt-4">
                            <button type="button" class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">{{ __tr('Save') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <h2 class="card-header" id="miscHeadingSeven">
                {{ __tr('Email') }}
            </h2>
            <div id="miscEmail" aria-labelledby="miscHeadingSeven"
                data-parent="#miscAccordion">
                <div class="card-body">
                    @if (swaksharyipadtalni())
                    <div class="alert alert-warning shadow-sm border-0 d-flex justify-content-between align-items-center">
                        <span>
                            {{ __tr('If you changed anything here or in .env file consider Clearing Optimization from Misc Settings.') }}
                        </span>
                        <!-- <a class="btn btn-sm btn-dark ms-3" href="{{ route('manage.configuration.read', ['pageType' => 'misc']) }}">
                                <i class="fas fa-cogs me-1"></i> {!! __tr('Go to Misc Settings') !!}
                            </a> -->
                    </div>
                    @endif

                    <!-- Email Setting Form -->
                    <form class="lw-ajax-form lw-form mt-4" method="post" action="{{ route('manage.configuration.write', ['pageType' => request()->pageType]) }}">
                        <div class="border-0">
                            <div class="card-body p-0 mb-3">

                                <!-- Use ENV Settings -->
                                <div class="form-group mt-2">
                                    <div class="custom-control custom-checkbox">
                                        <!-- Enable google login hidden field -->
                                        <input type="hidden" name="use_env_default_email_settings" value="0" />
                                        <!-- /Enable google login hidden field -->
                                        <input type="checkbox" class="custom-control-input" {{ $configurationData['use_env_default_email_settings'] == true ? 'checked' : '' }} id="forEnvDefaultSettings" name="use_env_default_email_settings" value="1">
                                        <label class="custom-control-label" for="forEnvDefaultSettings">
                                            {{ __tr('Use mail settings from .env file\'s') }}
                                        </label>
                                    </div>
                                </div>

                                <div id="lwAllFormFieldsBlock">
                                    <!-- Basic Info -->
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="lwMailFromAddress" class="form-label fw-semibold">
                                                {{ __tr('Mail From Address') }}
                                            </label>
                                            <input type="text" name="mail_from_address" id="lwMailFromAddress"
                                                class="form-control shadow-sm"
                                                required value="{{ $configurationData['mail_from_address'] }}">
                                        </div>

                                        <div class="col-md-6">
                                            <label for="lwMailFromName" class="form-label fw-semibold">
                                                {{ __tr('Mail From Name') }}
                                            </label>
                                            <input type="text" name="mail_from_name" id="lwMailFromName"
                                                class="form-control shadow-sm"
                                                required value="{{ $configurationData['mail_from_name'] }}">
                                        </div>
                                    </div>

                                    <!-- Driver -->
                                    <div class="mt-4">
                                        <label for="lwMailDriver" class="form-label fw-semibold">{{ __tr('Mail Driver') }}</label>
                                        <select id="lwMailDriver" name="mail_driver" required class="form-select shadow-sm">
                                            @if(!__isEmpty($configurationData['mail_drivers']))
                                            @foreach($configurationData['mail_drivers'] as $key => $driver)
                                            <option value="{{ $driver['id'] }}"
                                                {{ $driver['id'] == $configurationData['mail_driver'] ? 'selected' : '' }}>
                                                {{ $driver['name'] }}
                                            </option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>

                                    <!-- SMTP Block -->
                                    <div id="lwSmtpBlock" class="mt-4">
                                        <div class="card border shadow-sm">
                                            <div class="card-header bg-light fw-bold">
                                                <i class="fas fa-server me-1"></i> {{ __tr('SMTP Settings') }}
                                            </div>
                                            <div class="card-body">
                                                <div class="row g-3">
                                                    <div class="col-md-4">
                                                        <label for="lwMailHost" class="form-label">{{ __tr('Mail Host') }}</label>
                                                        <input type="text" class="form-control shadow-sm" name="smtp_mail_host" id="lwMailHost"
                                                            required value="{{ $configurationData['smtp_mail_host'] }}">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="lwMailPort" class="form-label">{{ __tr('Mail Port') }}</label>
                                                        <input type="number" class="form-control shadow-sm" name="smtp_mail_port" id="lwMailPort"
                                                            required min="0" value="{{ $configurationData['smtp_mail_port'] }}">
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="lwMailEncryption" class="form-label">{{ __tr('Mail Encryption') }}</label>
                                                        <select id="lwMailEncryption" class="form-select shadow-sm" name="smtp_mail_encryption" required>
                                                            @if(!__isEmpty($configurationData['mail_encryption_types']))
                                                            @foreach($configurationData['mail_encryption_types'] as $key => $value)
                                                            <option value="{{ $key }}" {{ $key == $configurationData['smtp_mail_encryption'] ? 'selected' : '' }}>
                                                                {{ $value }}
                                                            </option>
                                                            @endforeach
                                                            @endif
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="lwMailUsername" class="form-label">{{ __tr('Mail Username') }}</label>
                                                        <input type="text" class="form-control shadow-sm" name="smtp_mail_username" id="lwMailUsername"
                                                            required value="{{ $configurationData['smtp_mail_username'] }}">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="lwMailPasswordKey" class="form-label">{{ __tr('Mail Password / API Key') }}</label>
                                                        <input type="text" class="form-control shadow-sm" name="smtp_mail_password_or_apikey" id="lwMailPasswordKey"
                                                            required value="{{ $configurationData['smtp_mail_password_or_apikey'] }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Sparkpost Block -->
                                    <div id="lwSparkpostBlock" class="mt-4">
                                        <div class="card border shadow-sm">
                                            <div class="card-header bg-light fw-bold">
                                                <i class="fas fa-bolt me-1"></i> {{ __tr('Sparkpost Settings') }}
                                            </div>
                                            <div class="card-body">
                                                <label for="lwSparkpostKey" class="form-label">{{ __tr('Sparkpost Key') }}</label>
                                                <input type="text" class="form-control shadow-sm" name="sparkpost_mail_password_or_apikey" id="lwSparkpostKey"
                                                    required value="{{ $configurationData['sparkpost_mail_password_or_apikey'] }}">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Mailgun Block -->
                                    <div id="lwMailgunBlock" class="mt-4">
                                        <div class="card border shadow-sm">
                                            <div class="card-header bg-light fw-bold">
                                                <i class="fas fa-paper-plane me-1"></i> {{ __tr('Mailgun Settings') }}
                                            </div>
                                            <div class="card-body">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label for="lwMailgunDomain" class="form-label">{{ __tr('Mailgun Domain') }}</label>
                                                        <input type="text" class="form-control shadow-sm" name="mailgun_domain" id="lwMailgunDomain"
                                                            required value="{{ $configurationData['mailgun_domain'] }}">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="lwMailgunEndpoint" class="form-label">{{ __tr('Mailgun Endpoint') }}</label>
                                                        <input type="text" class="form-control shadow-sm" name="mailgun_domain" id="lwMailgunEndpoint"
                                                            required value="{{ $configurationData['mailgun_domain'] }}">
                                                    </div>
                                                    <div class="col-md-12">
                                                        <label for="lwMailgunSecret" class="form-label">{{ __tr('Mailgun Secret') }}</label>
                                                        <input type="text" class="form-control shadow-sm" name="mailgun_domain" id="lwMailgunSecret"
                                                            required value="{{ $configurationData['mailgun_domain'] }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div><!-- /#lwAllFormFieldsBlock -->
                            </div>
                        </div>

                        <!-- Save Button -->
                        <div class="float-right">
                            <a href class="lw-ajax-form-submit-action btn btn-primary px-4 shadow-sm">
                                <i class="fas fa-save me-1"></i> {{ __tr('Save') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>


    </div>


</div> <!-- /#settingsTabContent -->
@push('appScripts')
<script>
    (function() {
        'use strict';

        // Ensure DOM ready
        document.addEventListener('DOMContentLoaded', function() {
            // Guard: require jQuery
            if (typeof window.jQuery === 'undefined') {
                console.warn('jQuery is required for this script.');
                return;
            }
            var $ = window.jQuery;

            // Tabs: simple show/hide logic
            function activateTab(key) {
                // nav state
                $("#settingsTabs .nav-link").removeClass("active");
                $("#settingsTabs .nav-link[data-tab-target='" + key + "']").addClass("active");
                // pane state
                $("#settingsTabContent .lw-tab-pane").removeClass("active");
                $("#settingsTabContent [data-tab='" + key + "']").addClass("active");
            }
            $("#settingsTabs .nav-link").on('click', function(e) {
                e.preventDefault();
                var target = $(this).data('tab-target');
                activateTab(target);
                if (history && history.replaceState) {
                    history.replaceState(null, '', window.location.pathname + '#' + target);
                } else {
                    window.location.hash = target;
                }
            });
            // Initialize from hash if present
            var initial = (window.location.hash || '').replace('#', '');
            if (initial && $("#settingsTabs .nav-link[data-tab-target='" + initial + "']").length) {
                activateTab(initial);
            }

            /***********  Currency block start here ***********/
            var isZeroDecimalCurrency = false; //set by default zero decimal currency false

            // Show/hide zero decimal messages depending on switch state
            var $zeroSwitch = $("#lwZeroDecimalSwitch");

            function refreshZeroDecimalUI() {
                var zeroDecimal = $zeroSwitch.is(':checked');
                if (zeroDecimal) {
                    $("#lwZeroDecimalExist").show();
                    $("#lwZeroDecimalNotExist").hide();
                } else {
                    $("#lwZeroDecimalExist").hide();
                    $("#lwZeroDecimalNotExist").show();
                }
            }

            // initialize visibility on load
            if ($zeroSwitch.length) {
                refreshZeroDecimalUI();
                $zeroSwitch.on('change', function() {
                    refreshZeroDecimalUI();
                });
            }

            // Initialize selectize only if element exists and selectize available
            var $selectCurrency = $('#lwSelectCurrency');

            // Safely decode server-provided currency JSON
            var currencies = {};
            var zeroDecimalCurrency = {};
            try {
                currencies = @json($configurationData['currencies']['details'] ?? (object)[]);
                zeroDecimalCurrency = @json($configurationData['currencies']['zero_decimal'] ?? (object)[]);
            } catch (e) {
                console.warn('Could not parse currency JSON from server.');
            }

            if ($selectCurrency.length && typeof $selectCurrency.selectize === 'function') {
                $selectCurrency.selectize({
                    valueField: 'currency_code',
                    labelField: 'currency_name',
                    searchField: ['currency_code', 'currency_name'],
                    onChange: function(value) {
                        // trigger regular change handler as fallback
                        $selectCurrency.trigger('change');
                    }
                });
            }

            // On change - handle symbol, code and zero-decimal UI
            $selectCurrency.on('change', function(event) {
                var selectedCurrency = event.target.value;

                // Using lodash if available (original code used it). Fallback to simple check.
                var isMatch = [];
                if (typeof _ !== 'undefined' && _.filter) {
                    isMatch = _.filter(zeroDecimalCurrency, function(value, key) {
                        return (key === selectedCurrency);
                    });
                } else {
                    if (zeroDecimalCurrency && Object.prototype.hasOwnProperty.call(zeroDecimalCurrency, selectedCurrency)) {
                        isMatch = [zeroDecimalCurrency[selectedCurrency]];
                    }
                }

                isZeroDecimalCurrency = Boolean(isMatch.length);

                // show warning text if necessary
                if (isZeroDecimalCurrency) {
                    $("#lwIsZeroDecimalCurrency").show();
                } else {
                    $("#lwIsZeroDecimalCurrency").hide();
                }

                if (selectedCurrency && selectedCurrency !== 'other' && currencies && currencies[selectedCurrency]) {
                    $('#lwCurrencyCode').val(selectedCurrency);
                    $('#lwCurrencySymbol').val(currencies[selectedCurrency].ASCII || '');
                    $("#lwCurrencySymbolAddon").show().html(currencies[selectedCurrency].symbol || '');
                } else {
                    $('#lwCurrencyCode').val('');
                    $('#lwCurrencySymbol').val('');
                    $("#lwCurrencySymbolAddon").hide().html('');
                }
            });

            // Trigger change once (if current value isn't 'other')
            if ($selectCurrency.val() && $selectCurrency.val() !== 'other') {
                $selectCurrency.trigger('change');
            }

            // Delay trigger for zero decimal switch to allow selectize to initialize
            if (typeof window._ !== 'undefined' && window._.delay) {
                _.delay(function() {
                    $('#lwZeroDecimalSwitch').trigger('change');
                }, 300);
            } else {
                setTimeout(function() {
                    $('#lwZeroDecimalSwitch').trigger('change');
                }, 300);
            }

            /***********  Currency block end here ***********/
        });
    })();
    (function($) {
        'use strict';
        window.toggleFormOptions = function(value) {
            switch (value) {
                case 'smtp':
                    $('#lwSparkpostBlock, #lwMailgunBlock').hide();
                    $('#lwSmtpBlock').show();
                    break;
                case 'sparkpost':
                    $('#lwSmtpBlock, #lwMailgunBlock').hide();
                    $('#lwSparkpostBlock').show();
                    break;
                case 'mailgun':
                    $('#lwSparkpostBlock, #lwSmtpBlock').hide();
                    $('#lwMailgunBlock').show();
                    break;
                default:
            }
        };

        //for all form fields
        window.toggleFormByEnvSettings = function(value) {
            if (value == true) {
                $('#lwAllFormFieldsBlock').hide();
            } else {
                $('#lwAllFormFieldsBlock').show();
            }
        };

        toggleFormByEnvSettings(Boolean(""));

        toggleFormOptions("");

        $('#forEnvDefaultSettings:checkbox').change(function(value) {
            toggleFormByEnvSettings(this.checked);
        });

        //initialize selectize element
        $('#lwMailDriver').selectize({
            onChange: function(value) {
                toggleFormOptions(value);
            }
        });

        //initialize selectize element
        $('#lwMailEncryption').selectize({});
    })(jQuery);
</script>
<script>
    "use strict";

    function allowFunction() {
        var checkBox = document.getElementById("lwAllowGoogleLogin");
        var text = document.getElementById("inputFieldShow");
        if (checkBox.checked == true) {
            text.style.display = "block";
        } else {
            text.style.display = "none";
        }
    }

    function allowFacebookLoginFunction() {
        var checkBox1 = document.getElementById("lwAllowFacebookLogin");
        var text1 = document.getElementById("lwInputFieldShow");
        if (checkBox1.checked == true) {
            text1.style.display = "block";
        } else {
            text1.style.display = "none";
        }
    }



    //google login js block start
    $(document).ready(function() {
        var allowGoogleLogin = $("#lwAllowGoogleLogin").is(':checked');
        if (allowGoogleLogin) {
            $("#inputFieldShow").show()
        }

        //is true then disable input field
        if (!allowGoogleLogin) {
            $("#lwGoogleLoginInputField").addClass('lw-disabled-block-content');
            $('#lwAddGoogleKeys').attr("disabled", true);
        }

        //allow google switch on change event
        $("#lwAllowGoogleLogin").on('change', function(e) {
            allowGoogleLogin = $(this).is(":checked");

            //if condition false then add class
            if (!allowGoogleLogin) {
                $("#lwGoogleLoginInputField").addClass('lw-disabled-block-content');
                $('#lwAddGoogleKeys').attr("disabled", true);
            } else {
                $("#lwGoogleLoginInputField").removeClass('lw-disabled-block-content');
                $('#lwAddGoogleKeys').attr("disabled", false);
            }
        });

        /*********** Google Keys setting start here ***********/
        var isGoogleKeysInstalled = "",
            lwGoogleLoginInputField = $('#lwGoogleLoginInputField'),
            lwIsGoogleKeysExist = $('#lwIsGoogleKeysExist');

        // Check if test google login keys are installed
        if (isGoogleKeysInstalled) {
            lwGoogleLoginInputField.hide();
            lwIsGoogleKeysExist.show();
        } else {
            lwIsGoogleKeysExist.hide();
        }
        // Update google login checkout testing keys
        $('#lwAddGoogleKeys').click(function() {
            $("#lwGoogleKeysExist").val(0);
            lwGoogleLoginInputField.show();
            lwIsGoogleKeysExist.hide();
        });
        /*********** Google Keys setting end here ***********/
    });
    //google login js block end

    //facebook login js block start
    $(document).ready(function() {
        var allowFacebookLogin = $("#lwAllowFacebookLogin").is(':checked');
        if (allowFacebookLogin) {
            $("#lwInputFieldShow").show()
        }
        //is true then disable input field
        if (!allowFacebookLogin) {
            $("#lwFacebookLoginInputField").addClass('lw-disabled-block-content');
            $('#lwAddFacebookKeys').attr("disabled", true);
        }

        //allow facebook switch on change event
        $("#lwAllowFacebookLogin").on('change', function(e) {
            allowFacebookLogin = $(this).is(":checked");

            //if condition false then add class
            if (!allowFacebookLogin) {
                $("#lwFacebookLoginInputField").addClass('lw-disabled-block-content');
                $('#lwAddFacebookKeys').attr("disabled", true);
            } else {
                $("#lwFacebookLoginInputField").removeClass('lw-disabled-block-content');
                $('#lwAddFacebookKeys').attr("disabled", false);
            }
        });

        /*********** Facebook Keys setting start here ***********/
        var isFacebookKeysInstalled = "",
            lwFacebookLoginInputField = $('#lwFacebookLoginInputField'),
            lwIsFacebookKeysExist = $('#lwIsFacebookKeysExist');

        // Check if test facebook login keys are installed
        if (isFacebookKeysInstalled) {
            lwFacebookLoginInputField.hide();
            lwIsFacebookKeysExist.show();
        } else {
            lwIsFacebookKeysExist.hide();
        }
        // Update facebook login checkout testing keys
        $('#lwAddFacebookKeys').click(function() {
            $("#lwFacebookKeysExist").val(0);
            lwFacebookLoginInputField.show();
            lwIsFacebookKeysExist.hide();
        });
        /***********Facebook Keys setting end here ***********/
    });
    //facebook login js block end


    //on social login setting success callback function
    // function onSocialLoginFormCallback(responseData) {
    //     //check reaction code is 1 then reload view
    //     if (responseData.reaction == 1) {
    //         showConfirmation("{{ __tr('Settings Updated Successfully') }}", function() {
    //             __Utils.viewReload();
    //         }, {
    //             confirmButtonText: "{{ __tr('Reload Page') }}",
    //             type: "success"
    //         });
    //     }
    // };

    function myFunctionGoogle() {
        /* Get the text field */
        var copyText = document.getElementById("lwGoogleCallbackUrl");

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);
    }

    function myFunctionFacebook() {
        /* Get the text field */
        var copyText = document.getElementById("lwFacebookCallbackUrl");

        /* Select the text field */
        copyText.select();
        copyText.setSelectionRange(0, 99999); /* For mobile devices */

        /* Copy the text inside the text field */
        navigator.clipboard.writeText(copyText.value);
    }
</script>
<script>
    // document.addEventListener('DOMContentLoaded', function() {
    //     const allowCheckbox = document.getElementById('lwAllowGoogleLogin');
    //     const hiddenAllow = document.getElementById('lwEnableGoogleLogin');
    //     const inputFieldShow = document.getElementById('inputFieldShow');
    //     const googleKeysHidden = document.getElementById('lwGoogleKeysExist');

    //     // initialize display based on either the checkbox or the hidden value
    //     const initChecked = allowCheckbox.checked || hiddenAllow.value === '1';
    //     setVisibility(initChecked);

    //     // if google client id exists, show the installed group; otherwise hide it
    //     const hasClientId = googleKeysHidden && googleKeysHidden.value.trim().length > 0;
    //     document.getElementById('lwIsGoogleKeysExist').style.display = hasClientId ? 'block' : 'none';

    //     allowCheckbox.addEventListener('change', function() {
    //         hiddenAllow.value = this.checked ? '1' : '0';
    //         setVisibility(this.checked);
    //     });

    //     function setVisibility(show) {
    //         inputFieldShow.style.display = show ? 'block' : 'none';
    //     }
    // });

    // Copy callback URL to clipboard with fallback
    function myFunctionGoogle() {
        const cb = document.getElementById('lwGoogleCallbackUrl');
        if (!cb) return;
        cb.select();
        cb.setSelectionRange(0, 99999); // mobile

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(cb.value).then(function() {
                showCopiedToast();
            }, fallbackCopy);
        } else {
            fallbackCopy();
        }

        function fallbackCopy() {
            try {
                document.execCommand('copy');
                showCopiedToast();
            } catch (err) {
                alert('Copy failed — please select and copy manually.');
            }
        }

        function showCopiedToast() {
            // small unobtrusive feedback — change to your preferred UI (toast, tooltip etc.)
            const old = document.getElementById('google-copy-msg');
            if (old) old.remove();
            const msg = document.createElement('span');
            msg.id = 'google-copy-msg';
            msg.innerText = 'Copied!';
            msg.style.marginLeft = '8px';
            msg.className = 'text-success';
            const parent = cb.parentElement || document.getElementById('lwGoogleCallbackUrl').parentNode;
            parent.appendChild(msg);
            setTimeout(() => msg.remove(), 1500);
        }
    }
</script>
<script>
    // document.addEventListener('DOMContentLoaded', function() {
    //     const checkbox = document.getElementById('lwAllowFacebookLogin');
    //     const hidden = document.getElementById('lwEnableFacebookLogin');
    //     const inputFields = document.getElementById('lwInputFieldShow');

    //     // Initialize visibility
    //     setVisibility(checkbox.checked);

    //     checkbox.addEventListener('change', function() {
    //         hidden.value = this.checked ? '1' : '0';
    //         setVisibility(this.checked);
    //     });

    //     function setVisibility(show) {
    //         inputFields.style.display = show ? 'block' : 'none';
    //     }
    // });

    // Copy callback URL to clipboard
    function myFunctionFacebook() {
        const cb = document.getElementById('lwFacebookCallbackUrl');
        cb.select();
        cb.setSelectionRange(0, 99999);
        navigator.clipboard?.writeText(cb.value).then(() => {
            showCopiedMsg();
        }).catch(() => {
            document.execCommand('copy');
            showCopiedMsg();
        });

        function showCopiedMsg() {
            const old = document.getElementById('fb-copy-msg');
            if (old) old.remove();
            const msg = document.createElement('span');
            msg.id = 'fb-copy-msg';
            msg.innerText = 'Copied!';
            msg.className = 'text-success ms-2';
            cb.parentNode.appendChild(msg);
            setTimeout(() => msg.remove(), 1500);
        }
    }

    (function($) {
        'use strict';
        window.afterUploadedFile = function(responseData) {
            var requestData = responseData.data;
            $('#lwUploadedLogo').attr('src', requestData.path);
        }
    })(jQuery);
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.filepond--root').forEach(function(root) {
            const defaultUrl = root.dataset.defaultImageUrl || root.getAttribute('data-default-image-url') || '';
            const hasPreview = !!root.querySelector('.filepond--list .filepond--item') || !!root.querySelector('.filepond--file-poster img');

            const browser = root.querySelector('.filepond--browser'); // the file input wrapper

            function addChangeButton() {
                if (root.querySelector('.filepond-change-btn')) return; // avoid duplicates

                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'filepond-change-btn';
                btn.textContent = 'Change';
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    // trigger real file input click inside the browser wrapper
                    const input = browser && browser.querySelector('input[type="file"]');
                    if (input) input.click();
                });

                root.appendChild(btn);
            }

            function removeChangeButton() {
                const existing = root.querySelector('.filepond-change-btn');
                if (existing) existing.remove();
            }

            // initialize state
            if (defaultUrl || hasPreview) {
                root.classList.remove('fullclickable'); // disable full-box click
                // shrink/move the real file input so it doesn't cover the whole root
                if (browser) {
                    browser.style.position = 'relative';
                    browser.style.width = 'auto';
                    browser.style.height = 'auto';
                    browser.style.top = '';
                    browser.style.left = '';
                    browser.style.right = '';
                }
                addChangeButton();
            } else {
                root.classList.add('fullclickable'); // entire box clickable
                removeChangeButton();
            }

            // Watch for changes (remove/add preview) and update UI accordingly
            const mo = new MutationObserver(function() {
                const nowHasPreview = !!root.querySelector('.filepond--list .filepond--item') || !!root.querySelector('.filepond--file-poster img');
                if (nowHasPreview) {
                    root.classList.remove('fullclickable');
                    if (browser) {
                        browser.style.position = 'relative';
                        browser.style.width = 'auto';
                        browser.style.height = 'auto';
                    }
                    addChangeButton();
                } else {
                    root.classList.add('fullclickable');
                    removeChangeButton();
                    if (browser) {
                        browser.style.position = '';
                        browser.style.width = '';
                        browser.style.height = '';
                    }
                }
            });

            mo.observe(root, {
                childList: true,
                subtree: true
            });
        });
    });
</script>
<script>
    // Attach event handlers only once
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('form.lw-ajax-form').forEach(form => {
            if (form.dataset.ajaxAttached) return;
            form.dataset.ajaxAttached = 'true';

            // custom Save button triggers the same submit logic
            form.querySelectorAll('.lw-ajax-form-submit-action').forEach(btn => {
                btn.addEventListener('click', async (e) => {
                    e.preventDefault();
                    await handleAjaxSubmit(form);
                });
            });

            // optional: if user presses Enter inside inputs
            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                await handleAjaxSubmit(form);
            });
        });

        async function handleAjaxSubmit(form) {
            if (form._submitting) return;
            form._submitting = true;

            const submitButtons = form.querySelectorAll('.lw-ajax-form-submit-action');
            submitButtons.forEach(b => b.disabled = true);

            try {
                const res = await fetch(form.action, {
                    method: form.method || 'POST',
                    body: new FormData(form),
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                const json = await res.json();

                if (json.data.messageType === 'success') {
                    showSuccessMessage("{{ __tr('Settings Updated Successfully') }}");
                } else {
                    showErrorMessage(json.data.message);
                }

            } catch (err) {
                showErrorMessage('⚠️ AJAX Error: ' + err.message);
            } finally {
                form._submitting = false;
                submitButtons.forEach(b => b.disabled = false);
            }

        }
    });

    document.addEventListener("DOMContentLoaded", function() {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>
@endpush