@extends('layouts.app')

@section('title', 'HastAI Admin - Settings')
@section('page_title', 'Settings')

@section('content')
<div class="row">
    <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
        <div class="card">
            <div class="card-header">
                <h5>App Settings</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('general-settings.update') }}" method="POST">
                    @csrf
                    
                    <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', session('active_tab', 'general')) }}">

                    <ul class="nav nav-tabs mb-4" id="settingsTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active font-weight-bold" id="general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="general" aria-selected="true">Maintenance Mode</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="gemini-tab" data-toggle="tab" href="#gemini" role="tab" aria-controls="gemini" aria-selected="false">Gemini AI Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="prompt-tab" data-toggle="tab" href="#prompt" role="tab" aria-controls="prompt" aria-selected="false">Report Prompt Config</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="palm-profile-tab" data-toggle="tab" href="#palm-profile" role="tab" aria-controls="palm-profile" aria-selected="false">Palm Profile Prompt</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="app-update-tab" data-toggle="tab" href="#app-update" role="tab" aria-controls="app-update" aria-selected="false">App Update Setting</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="revenuecat-tab" data-toggle="tab" href="#revenuecat" role="tab" aria-controls="revenuecat" aria-selected="false">RevenueCat Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="signup-bonus-tab" data-toggle="tab" href="#signup-bonus" role="tab" aria-controls="signup-bonus" aria-selected="false">Signup Bonus Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="referral-tab" data-toggle="tab" href="#referral" role="tab" aria-controls="referral" aria-selected="false">Refer & Earn Settings</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link font-weight-bold" id="report-limit-tab" data-toggle="tab" href="#report-limit" role="tab" aria-controls="report-limit" aria-selected="false">General setting</a>
                        </li>
                    </ul>

                    <div class="tab-content" id="settingsTabContent">
                        <!-- Tab 1: Maintenance Mode -->
                        <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                            <!-- Maintenance Mode Switch -->
                            <div class="form-group mb-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="maintenance_mode" name="maintenance_mode" value="1" {{ $settings->maintenance_mode ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold" for="maintenance_mode">Maintenance Mode</label>
                                </div>
                                <small class="form-text text-muted">When enabled, users will see the maintenance screen and won't be allowed to use the app.</small>
                            </div>

                            <!-- Maintenance Title -->
                            <div class="form-group mb-3">
                                <label for="maintenance_title" class="form-label font-weight-bold">Maintenance Title</label>
                                <input type="text" name="maintenance_title" id="maintenance_title" class="form-control @error('maintenance_title') is-invalid @enderror" value="{{ old('maintenance_title', $settings->maintenance_title) }}" required>
                                @error('maintenance_title')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- Maintenance Message -->
                            <div class="form-group mb-4">
                                <label for="maintenance_message" class="form-label font-weight-bold">Maintenance Message</label>
                                <textarea name="maintenance_message" id="maintenance_message" rows="4" class="form-control @error('maintenance_message') is-invalid @enderror" required>{{ old('maintenance_message', $settings->maintenance_message) }}</textarea>
                                @error('maintenance_message')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- Maintenance Action Button Enabled -->
                            <div class="form-group mb-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="maintenance_button_enabled" name="maintenance_button_enabled" value="1" {{ old('maintenance_button_enabled', $settings->maintenance_button_enabled) ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold" for="maintenance_button_enabled">Enable Action Button</label>
                                </div>
                                <small class="form-text text-muted">Toggle to display a custom action button on the app's maintenance screen.</small>
                            </div>

                            <!-- Maintenance Action Button Text -->
                            <div class="form-group mb-3">
                                <label for="maintenance_button_text" class="form-label font-weight-bold">Action Button Text</label>
                                <input type="text" name="maintenance_button_text" id="maintenance_button_text" class="form-control @error('maintenance_button_text') is-invalid @enderror" value="{{ old('maintenance_button_text', $settings->maintenance_button_text) }}">
                                @error('maintenance_button_text')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- Maintenance Action Button Link -->
                            <div class="form-group mb-4">
                                <label for="maintenance_button_link" class="form-label font-weight-bold">Action Button Link</label>
                                <input type="text" name="maintenance_button_link" id="maintenance_button_link" class="form-control @error('maintenance_button_link') is-invalid @enderror" value="{{ old('maintenance_button_link', $settings->maintenance_button_link) }}">
                                @error('maintenance_button_link')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Tab 2: Gemini AI Settings -->
                        <div class="tab-pane fade" id="gemini" role="tabpanel" aria-labelledby="gemini-tab">
                            <!-- Gemini API Key -->
                            <div class="form-group mb-3">
                                <label for="gemini_api_key" class="form-label font-weight-bold">Gemini API Key</label>
                                <input type="password" name="gemini_api_key" id="gemini_api_key" class="form-control @error('gemini_api_key') is-invalid @enderror" value="{{ old('gemini_api_key', $settings->gemini_api_key) }}">
                                <small class="form-text text-muted">Enter your Gemini API key from Google AI Studio. Left empty to disable API connection.</small>
                                @error('gemini_api_key')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- Gemini Model Name -->
                            <div class="form-group mb-3">
                                <label for="gemini_model_name" class="form-label font-weight-bold">Gemini Model Name</label>
                                <input type="text" name="gemini_model_name" id="gemini_model_name" class="form-control @error('gemini_model_name') is-invalid @enderror" value="{{ old('gemini_model_name', $settings->gemini_model_name) }}" required>
                                <small class="form-text text-muted">Specify the Gemini model to use (e.g. <code>gemini-1.5-flash</code>, <code>gemini-1.5-pro</code>, <code>gemini-2.5-flash</code>, etc.)</small>
                                @error('gemini_model_name')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Tab 3: Report Prompt Config -->
                        <div class="tab-pane fade" id="prompt" role="tabpanel" aria-labelledby="prompt-tab">
                            <!-- Final Prompt Builder -->
                            <div class="form-group mb-3">
                                <label for="final_prompt_builder" class="form-label font-weight-bold">Final Prompt Builder</label>
                                <div class="mb-2">
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{system_prompt}">{system_prompt}</button>
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{general_instructions}">{general_instructions}</button>
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{user_profile_json}">{user_profile_json}</button>
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{palm_analysis_json}">{palm_analysis_json}</button>
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{writing_style_instructions}">{writing_style_instructions}</button>
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{widget_library_instructions}">{widget_library_instructions}</button>
                                    <button type="button" class="btn btn-xs btn-outline-info insert-var-btn mr-1 mb-1" data-var="{report_section_prompt}">{report_section_prompt}</button>
                                </div>
                                <textarea name="final_prompt_builder" id="final_prompt_builder" rows="12" class="form-control @error('final_prompt_builder') is-invalid @enderror" style="font-family: monospace; font-size: 13px;">{{ old('final_prompt_builder', $settings->final_prompt_builder) }}</textarea>
                                <small class="form-text text-muted">Defines the overall template structure of the final prompt sent to the AI. Click the buttons above to dynamically insert the corresponding variables at the current cursor position.</small>
                                @error('final_prompt_builder')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- System Prompt -->
                            <div class="form-group mb-3">
                                <label for="system_prompt" class="form-label font-weight-bold">System Prompt</label>
                                <textarea name="system_prompt" id="system_prompt" rows="8" class="form-control @error('system_prompt') is-invalid @enderror">{{ old('system_prompt', $settings->system_prompt) }}</textarea>
                                <small class="form-text text-muted">The system prompt template used for report generation. Available variables: <code>{report_name}</code>, <code>{report_language}</code>, <code>{user_profile_details}</code>, <code>{general_instructions}</code>, <code>{output_json_format}</code>.</small>
                                @error('system_prompt')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- General Instruction -->
                            <div class="form-group mb-3">
                                <label for="general_instruction" class="form-label font-weight-bold">General Instruction</label>
                                <textarea name="general_instruction" id="general_instruction" rows="8" class="form-control @error('general_instruction') is-invalid @enderror">{{ old('general_instruction', $settings->general_instruction) }}</textarea>
                                <small class="form-text text-muted">Common instructions for the AI model when generating reports.</small>
                                @error('general_instruction')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- Writing Style Instruction -->
                            <div class="form-group mb-3">
                                <label for="writing_style_instructions" class="form-label font-weight-bold">Writing Style Instruction</label>
                                <textarea name="writing_style_instructions" id="writing_style_instructions" rows="4" class="form-control @error('writing_style_instructions') is-invalid @enderror">{{ old('writing_style_instructions', $settings->writing_style_instructions) }}</textarea>
                                <small class="form-text text-muted">Specific style guidelines for the AI generation (e.g. professional, empathetic, tone directives).</small>
                                @error('writing_style_instructions')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- Widget Library Format & instruction -->
                            <div class="form-group mb-3">
                                <label for="widget_library_json" class="form-label font-weight-bold">Widget Library Format & instruction</label>
                                <textarea name="widget_library_json" id="widget_library_json" rows="12" class="form-control @error('widget_library_json') is-invalid @enderror" style="font-family: monospace; font-size: 13px;">{{ old('widget_library_json', $settings->widget_library_json) }}</textarea>
                                <small class="form-text text-muted">The JSON structure defining the available widget configurations and libraries.</small>
                                @error('widget_library_json')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>



                        </div>

                        <!-- Tab 4: Palm Profile Prompt -->
                        <div class="tab-pane fade" id="palm-profile" role="tabpanel" aria-labelledby="palm-profile-tab">
                            <!-- Profile palms first Scan Prompt -->
                            <div class="form-group mb-3">
                                <label for="palm_first_scan_prompt" class="form-label font-weight-bold">Profile palms first Scan Prompt</label>
                                <textarea name="palm_first_scan_prompt" id="palm_first_scan_prompt" rows="12" class="form-control @error('palm_first_scan_prompt') is-invalid @enderror">{{ old('palm_first_scan_prompt', $settings->palm_first_scan_prompt) }}</textarea>
                                <small class="form-text text-muted">The prompt guidelines that the AI model will follow during the user's initial hand scan.</small>
                                @error('palm_first_scan_prompt')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Tab 5: App Update Setting -->
                        <div class="tab-pane fade" id="app-update" role="tabpanel" aria-labelledby="app-update-tab">
                            <!-- Minimum Version Code -->
                            <div class="form-group mb-3">
                                <label for="min_version_code" class="form-label font-weight-bold">Minimum Version Code</label>
                                <input type="number" name="min_version_code" id="min_version_code" class="form-control @error('min_version_code') is-invalid @enderror" value="{{ old('min_version_code', $settings->min_version_code) }}" min="0" required>
                                <small class="form-text text-muted">The minimum version code (e.g. <code>1</code>, <code>2</code>) that users must have installed. If the user's version is less than this, they will be forced to update.</small>
                                @error('min_version_code')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Tab 6: RevenueCat Settings -->
                        <div class="tab-pane fade" id="revenuecat" role="tabpanel" aria-labelledby="revenuecat-tab">
                            <h5 class="mb-3 text-primary">RevenueCat Configuration</h5>
                            
                            <!-- Project ID -->
                            <div class="form-group mb-3">
                                <label for="revenuecat_project_id" class="form-label font-weight-bold">RevenueCat Project ID</label>
                                <input type="text" name="revenuecat_project_id" id="revenuecat_project_id" class="form-control @error('revenuecat_project_id') is-invalid @enderror" value="{{ old('revenuecat_project_id', $settings->revenuecat_project_id) }}" placeholder="e.g. prj_xyz123abc">
                                <small class="form-text text-muted">Found in your RevenueCat Project Settings URL: <code>https://app.revenuecat.com/projects/{project_id}</code></small>
                                @error('revenuecat_project_id')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <!-- V2 Secret Key -->
                            <div class="form-group mb-3">
                                <label for="revenuecat_v2_secret_key" class="form-label font-weight-bold">RevenueCat V2 Secret API Key</label>
                                <input type="text" name="revenuecat_v2_secret_key" id="revenuecat_v2_secret_key" class="form-control @error('revenuecat_v2_secret_key') is-invalid @enderror" value="{{ old('revenuecat_v2_secret_key', $settings->revenuecat_v2_secret_key) }}" placeholder="Starts with rc_pub_ or similar (V2 Secret Key)">
                                <small class="form-text text-muted">Generate a V2 secret API key in the RevenueCat dashboard under Project Settings > API Keys.</small>
                                @error('revenuecat_v2_secret_key')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Tab 7: Signup Bonus Settings -->
                        <div class="tab-pane fade" id="signup-bonus" role="tabpanel" aria-labelledby="signup-bonus-tab">
                            <h5 class="mb-3 text-primary">Signup Bonus Configuration</h5>
                            
                            <!-- Signup Bonus Enable/Disable Switch -->
                            <div class="form-group mb-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="signup_bonus_enabled" name="signup_bonus_enabled" value="1" {{ $settings->signup_bonus_enabled ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold" for="signup_bonus_enabled">Enable Signup Bonus</label>
                                </div>
                                <small class="form-text text-muted">When enabled, newly registered users will receive a signup credit bonus.</small>
                            </div>

                            <!-- Signup Bonus Credits Input -->
                            <div class="form-group mb-3" id="signup_credits_container" style="{{ $settings->signup_bonus_enabled ? '' : 'display: none;' }}">
                                <label for="signup_bonus_credits" class="form-label font-weight-bold">Signup Bonus Credits</label>
                                <input type="number" name="signup_bonus_credits" id="signup_bonus_credits" class="form-control @error('signup_bonus_credits') is-invalid @enderror" value="{{ old('signup_bonus_credits', $settings->signup_bonus_credits) }}" min="0">
                                <small class="form-text text-muted">Enter the number of credits to award new users. If set to 0, no credits will be awarded.</small>
                                @error('signup_bonus_credits')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Tab 8: Refer & Earn Settings -->
                        <div class="tab-pane fade" id="referral" role="tabpanel" aria-labelledby="referral-tab">
                            <!-- Referral Enabled Switch -->
                            <div class="form-group mb-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="referral_enabled" name="referral_enabled" value="1" {{ $settings->referral_enabled ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold" for="referral_enabled">Enable Refer & Earn</label>
                                </div>
                                <small class="form-text text-muted">When enabled, users can refer new users and earn coins/credits.</small>
                            </div>

                            <div id="referral_settings_container" style="{{ $settings->referral_enabled ? '' : 'display: none;' }}">
                                <!-- Referral Max Limit -->
                                <div class="form-group mb-3">
                                    <label for="referral_max_limit" class="form-label font-weight-bold">Max Referrals Allowed</label>
                                    <input type="number" name="referral_max_limit" id="referral_max_limit" class="form-control @error('referral_max_limit') is-invalid @enderror" value="{{ old('referral_max_limit', $settings->referral_max_limit) }}" min="1">
                                    <small class="form-text text-muted">Enter the maximum number of successful referrals a user can get rewarded for.</small>
                                    @error('referral_max_limit')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <!-- Referral Reward Credits -->
                                <div class="form-group mb-3">
                                    <label for="referral_reward_credits" class="form-label font-weight-bold">Referral Reward Coins/Credits</label>
                                    <input type="number" name="referral_reward_credits" id="referral_reward_credits" class="form-control @error('referral_reward_credits') is-invalid @enderror" value="{{ old('referral_reward_credits', $settings->referral_reward_credits) }}" min="0">
                                    <small class="form-text text-muted">Enter the number of credits/coins to award the referrer for each completed referral.</small>
                                    @error('referral_reward_credits')
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Tab 9: General Settings / Report & Profile Limits -->
                        <div class="tab-pane fade" id="report-limit" role="tabpanel" aria-labelledby="report-limit-tab">
                            <h5 class="mb-3 text-primary">General Configuration</h5>

                            <!-- Palm Profile Limit Input -->
                            <div class="form-group mb-4">
                                <label for="palm_profile_limit" class="form-label font-weight-bold">Palm Profile Limit</label>
                                <input type="number" name="palm_profile_limit" id="palm_profile_limit" class="form-control @error('palm_profile_limit') is-invalid @enderror" value="{{ old('palm_profile_limit', $settings->palm_profile_limit) }}" min="1" required>
                                <small class="form-text text-muted">Enter the maximum number of palm profiles a user is allowed to create.</small>
                                @error('palm_profile_limit')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <hr class="my-4">
                            
                            <!-- Report Limit Enable/Disable Switch -->
                            <div class="form-group mb-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="report_limit_enabled" name="report_limit_enabled" value="1" {{ $settings->report_limit_enabled ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold" for="report_limit_enabled">Enable Daily Report Generation Limit</label>
                                </div>
                                <small class="form-text text-muted">When enabled, users will be restricted from creating more than a specified number of reports per day.</small>
                            </div>

                            <!-- Max Reports Per Day Input -->
                            <div class="form-group mb-3" id="report_limit_container" style="{{ $settings->report_limit_enabled ? '' : 'display: none;' }}">
                                <label for="max_reports_per_day" class="form-label font-weight-bold">Maximum Reports Per Day</label>
                                <input type="number" name="max_reports_per_day" id="max_reports_per_day" class="form-control @error('max_reports_per_day') is-invalid @enderror" value="{{ old('max_reports_per_day', $settings->max_reports_per_day) }}" min="1">
                                <small class="form-text text-muted">Enter the maximum number of reports a user can generate in a single day.</small>
                                @error('max_reports_per_day')
                                    <span class="invalid-feedback d-block" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="text-right mt-4">
                        <a href="{{ route('dashboard') }}" class="btn btn-secondary mr-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Settings</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Restore active tab if specified
        const activeTab = document.getElementById('active_tab').value;
        if (activeTab && activeTab !== 'general') {
            $('#settingsTab a[href="#' + activeTab + '"]').tab('show');
        }

        // Update active tab hidden input when tab is switched
        $('#settingsTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            const tabId = e.target.getAttribute('href').substring(1);
            document.getElementById('active_tab').value = tabId;
        });

        // Insert variable at cursor position in final_prompt_builder
        const textarea = document.getElementById('final_prompt_builder');
        const insertButtons = document.querySelectorAll('.insert-var-btn');
        
        insertButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                const varText = this.getAttribute('data-var');
                const startPos = textarea.selectionStart;
                const endPos = textarea.selectionEnd;
                const value = textarea.value;
                
                textarea.value = value.substring(0, startPos) + varText + value.substring(endPos, value.length);
                
                // Refocus and place cursor after inserted text
                textarea.focus();
                const newCursorPos = startPos + varText.length;
                textarea.setSelectionRange(newCursorPos, newCursorPos);
            });
        });

        // Toggle signup bonus credits container
        const signupBonusSwitch = document.getElementById('signup_bonus_enabled');
        const signupCreditsContainer = document.getElementById('signup_credits_container');
        if (signupBonusSwitch && signupCreditsContainer) {
            signupBonusSwitch.addEventListener('change', function() {
                if (this.checked) {
                    signupCreditsContainer.style.display = 'block';
                } else {
                    signupCreditsContainer.style.display = 'none';
                }
            });
        }

        // Toggle referral settings container
        const referralSwitch = document.getElementById('referral_enabled');
        const referralSettingsContainer = document.getElementById('referral_settings_container');
        if (referralSwitch && referralSettingsContainer) {
            referralSwitch.addEventListener('change', function() {
                if (this.checked) {
                    referralSettingsContainer.style.display = 'block';
                } else {
                    referralSettingsContainer.style.display = 'none';
                }
            });
        }

        // Toggle report limit container
        const reportLimitSwitch = document.getElementById('report_limit_enabled');
        const reportLimitContainer = document.getElementById('report_limit_container');
        if (reportLimitSwitch && reportLimitContainer) {
            reportLimitSwitch.addEventListener('change', function() {
                if (this.checked) {
                    reportLimitContainer.style.display = 'block';
                } else {
                    reportLimitContainer.style.display = 'none';
                }
            });
        }
    });
</script>
@endsection