{**
 * WhatsApp Bot - Merged Overview Template
 * Path: /modules/servers/whatsappbot/templates/overview.tpl
 * Merged version with Settings and Knowledge Base tabs integrated
 * Uses AJAX for saving to save_settings.php and save_knowledge.php
 *}

<div class="whatsapp-bot-dashboard">
    
    {* Suspended State *}
    {if $tenant.status eq 'suspended'}
    <div class="alert alert-warning alert-dismissible fade show shadow-sm border-0" role="alert">
        <div class="d-flex align-items-center">
            <div class="alert-icon bg-warning text-white rounded-circle p-3 mr-3">
                <i class="fas fa-pause-circle fa-2x"></i>
            </div>
            <div>
                <h4 class="alert-heading mb-1">Service Suspended</h4>
                <p class="mb-0">Your WhatsApp bot has been suspended. Please contact support or settle any outstanding invoices to reactivate.</p>
            </div>
        </div>
        <a href="submitticket.php?step=2&deptid=1" class="btn btn-warning mt-3">
            <i class="fas fa-life-ring mr-2"></i>Contact Support
        </a>
    </div>
    {else}

    {* Main Navigation Tabs *}
    <div class="main-tabs-wrapper mb-4">
        <ul class="nav nav-pills main-tabs" id="mainTab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="overview-tab" data-toggle="pill" data-target="#overview-panel" 
                        href="#overview" role="tab" aria-controls="overview-panel" aria-selected="true">
                    <i class="fas fa-home mr-2"></i>Overview
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="settings-tab" data-toggle="pill" data-target="#settings-panel" 
                        href="#settings" role="tab" aria-controls="settings-panel" aria-selected="false">
                    <i class="fas fa-cog mr-2"></i>Settings
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="knowledge-tab" data-toggle="pill" data-target="#knowledge-panel" 
                        href="#knowledge" role="tab" aria-controls="knowledge-panel" aria-selected="false">
                    <i class="fas fa-book mr-2"></i>Knowledge Base
                    {if $knowledge_count}
                        <span class="badge badge-success ml-2">{$knowledge_count}</span>
                    {/if}
                </a>
            </li>
        </ul>
    </div>

    {* Tab Content *}
    <div class="tab-content" id="mainTabContent">
        
        {* ==================== OVERVIEW TAB ==================== *}
        <div class="tab-pane fade show active" id="overview-panel" role="tabpanel" aria-labelledby="overview-tab">
            
            {* Connection Status Banner *}
            <div class="status-banner {if $session.status == 'connected'}status-connected{elseif $session.status == 'disconnected'}status-disconnected{else}status-connecting{/if} mb-4">
                <div class="status-content">
                    <div class="status-icon-wrapper">
                        {if $session.status == 'connected'}
                            <div class="pulse-ring"></div>
                            <i class="fas fa-check-circle"></i>
                        {elseif $session.status == 'disconnected'}
                            <i class="fas fa-times-circle"></i>
                        {else}
                            <div class="spinner-ring"></div>
                            <i class="fas fa-sync fa-spin"></i>
                        {/if}
                    </div>
                    <div class="status-text">
                        <h3>
                            {if $session.status == 'connected'}
                                WhatsApp Connected
                            {elseif $session.status == 'disconnected'}
                                WhatsApp Disconnected
                            {else}
                                Connecting...
                            {/if}
                        </h3>
                        <p class="mb-0">
                            {if $session.status == 'connected'}
                                Your bot is online and responding to messages on <strong>{$tenant.whatsapp_number}</strong>
                                {if $session.last_connected}
                                    <span class="d-block mt-1 opacity-75">
                                        <i class="far fa-clock mr-1"></i>Connected since: {$session.last_connected|date_format:"%Y-%m-%d %H:%M"}
                                    </span>
                                {/if}
                            {elseif $session.status == 'disconnected'}
                                Your bot is offline. Scan the QR code below to reconnect.
                            {else}
                                Please wait while we establish your WhatsApp connection...
                            {/if}
                        </p>
                    </div>
                    {if $session.status == 'disconnected'}
                    <div class="status-action">
                        <button class="btn btn-light btn-lg shadow-sm" data-toggle="modal" data-target="#qrModal">
                            <i class="fas fa-qrcode mr-2"></i>Scan QR Code
                        </button>
                    </div>
                    {/if}
                </div>
            </div>

            {* QR Code Section *}
            {if $session.status neq 'connected' && $tenant.status neq 'suspended'}
            <div class="qr-section mb-4">
                <div class="card border-0 shadow-lg">
                    <div class="card-body p-5 text-center">
                        <div id="qr-loading">
                            <div class="spinner-grow text-success mb-3" style="width: 3rem; height: 3rem;" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <h5 class="text-muted">Generating QR Code...</h5>
                            <p class="text-muted">Please wait while we prepare your connection</p>
                        </div>
                        <div id="qr-loaded" style="display:none;">
                            <div class="qr-wrapper position-relative d-inline-block">
                                <div class="qr-glow"></div>
                                <img id="qr-img" src="" alt="WhatsApp QR Code" class="qr-image">
                                <div class="qr-refresh-overlay" onclick="loadQRCode()">
                                    <i class="fas fa-sync-alt"></i>
                                </div>
                            </div>
                            <div class="qr-instructions mt-4">
                                <h5 class="text-muted mb-3"><i class="fas fa-mobile-alt mr-2"></i>How to Connect</h5>
                                <div class="steps-container">
                                    <div class="step-item">
                                        <div class="step-number">1</div>
                                        <span>Open WhatsApp</span>
                                    </div>
                                    <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
                                    <div class="step-item">
                                        <div class="step-number">2</div>
                                        <span>Settings → Linked Devices</span>
                                    </div>
                                    <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
                                    <div class="step-item">
                                        <div class="step-number">3</div>
                                        <span>Link a Device</span>
                                    </div>
                                    <div class="step-arrow"><i class="fas fa-chevron-right"></i></div>
                                    <div class="step-item">
                                        <div class="step-number">4</div>
                                        <span>Scan QR Code</span>
                                    </div>
                                </div>
                            </div>
                            <div class="qr-timer mt-3">
                                <div class="progress" style="height: 4px; width: 200px; margin: 0 auto;">
                                    <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" 
                                         style="width: 100%" id="qrTimer"></div>
                                </div>
                                <small class="text-muted mt-2 d-block">
                                    <i class="fas fa-clock mr-1"></i>Refreshes automatically every 60 seconds
                                </small>
                            </div>
                        </div>
                        <div id="qr-error" style="display:none;">
                            <i class="fas fa-exclamation-circle fa-3x text-danger mb-3"></i>
                            <h5 class="text-muted">Could not generate QR code</h5>
                            <button class="btn btn-outline-primary mt-2" onclick="loadQRCode()">
                                <i class="fas fa-refresh mr-2"></i>Try Again
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {/if}

            {* Statistics Dashboard *}
            <div class="row stats-row">
                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="stat-card sent">
                        <div class="stat-icon">
                            <i class="fas fa-paper-plane"></i>
                        </div>
                        <div class="stat-content">
                            <h3 class="stat-number">{$stats.messages_sent|number_format|default:"0"}</h3>
                            <p class="stat-label">Messages Sent</p>
                            <div class="stat-trend {if $stats.messages_sent_change >= 0}trend-up{else}trend-down{/if}">
                                <i class="fas fa-arrow-{if $stats.messages_sent_change >= 0}up{else}down{/if} mr-1"></i>
                                {$stats.messages_sent_change|abs}% <span>vs last month</span>
                            </div>
                        </div>
                        <div class="stat-decoration"></div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="stat-card received">
                        <div class="stat-icon">
                            <i class="fas fa-inbox"></i>
                        </div>
                        <div class="stat-content">
                            <h3 class="stat-number">{$stats.messages_received|number_format|default:"0"}</h3>
                            <p class="stat-label">Messages Received</p>
                            <div class="stat-trend {if $stats.messages_received_change >= 0}trend-up{else}trend-down{/if}">
                                <i class="fas fa-arrow-{if $stats.messages_received_change >= 0}up{else}down{/if} mr-1"></i>
                                {$stats.messages_received_change|abs}% <span>vs last month</span>
                            </div>
                        </div>
                        <div class="stat-decoration"></div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="stat-card ai">
                        <div class="stat-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <div class="stat-content">
                            <h3 class="stat-number">{$stats.ai_queries|number_format|default:"0"}</h3>
                            <p class="stat-label">AI Queries</p>
                            <div class="stat-model">
                                <span class="badge badge-light">{$tenant.config.ai_model|default:"GPT-4"}</span>
                            </div>
                        </div>
                        <div class="stat-decoration"></div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 mb-4">
                    <div class="stat-card voice">
                        <div class="stat-icon">
                            <i class="fas fa-microphone"></i>
                        </div>
                        <div class="stat-content">
                            <h3 class="stat-number">{$stats.voice_messages|number_format|default:"0"}</h3>
                            <p class="stat-label">Voice Messages</p>
                            <div class="stat-sub">
                                {$stats.voice_minutes|number_format:1|default:"0"} mins processed
                            </div>
                        </div>
                        <div class="stat-decoration"></div>
                    </div>
                </div>
            </div>

            {* Main Content Grid *}
            <div class="row">
                <div class="col-lg-8">
                    {* Usage Chart *}
                    <div class="card chart-card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent border-0 pt-4 pb-0">
                            <h5 class="card-title">
                                <i class="fas fa-chart-line text-primary mr-2"></i>Message Activity
                                <span class="text-muted font-weight-normal ml-2" style="font-size: 0.85rem;">Last 30 Days</span>
                            </h5>
                        </div>
                        <div class="card-body">
                            <canvas id="usageChart" height="100"></canvas>
                        </div>
                    </div>

                    {* Recent Conversations *}
                    {if $stats.recent_conversations}
                    <div class="card conversations-card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent border-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-comments text-info mr-2"></i>Recent Conversations
                            </h5>
                            <a href="clientarea.php?action=productdetails&id={$serviceid}&modpage=conversations" 
                               class="btn btn-sm btn-outline-primary">
                                View All
                            </a>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="border-0">Customer</th>
                                            <th class="border-0">Last Message</th>
                                            <th class="border-0 text-center">Msgs</th>
                                            <th class="border-0 text-right">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {foreach from=$stats.recent_conversations item=conv}
                                        <tr class="conversation-row">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="avatar-circle bg-gradient-primary text-white mr-3">
                                                        {$conv.customer_name|substr:0:1|upper|default:"?"}
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{$conv.customer_name|default:"Unknown"}</div>
                                                        <small class="text-muted">{$conv.customer_phone}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="message-preview">{$conv.last_message|truncate:40}</div>
                                                <small class="text-muted">
                                                    <i class="far fa-clock mr-1"></i>{$conv.last_message_time|date_format:"%H:%M"}
                                                </small>
                                            </td>
                                            <td class="text-center">
                                                <span class="badge badge-pill badge-secondary">{$conv.message_count}</span>
                                            </td>
                                            <td class="text-right">
                                                <a href="clientarea.php?action=productdetails&id={$serviceid}&modpage=conversation&convid={$conv.id}" 
                                                   class="btn btn-sm btn-primary btn-rounded">
                                                    <i class="fas fa-eye mr-1"></i>View
                                                </a>
                                            </td>
                                        </tr>
                                        {/foreach}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    {/if}
                </div>

                <div class="col-lg-4">
                    {* Plan Information *}
                    <div class="card plan-card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent border-0 pt-4">
                            <h5 class="card-title">
                                <i class="fas fa-crown text-warning mr-2"></i>Plan Details
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="plan-badge mb-3">
                                <span class="plan-name">{$tenant.plan|capitalize|default:"Basic"}</span>
                                {if $tenant.status eq 'active'}
                                    <span class="status-badge active">Active</span>
                                {else}
                                    <span class="status-badge">{$tenant.status|capitalize}</span>
                                {/if}
                            </div>
                            
                            <ul class="feature-list">
                                <li class="{if $plan_limits.messages_per_month > 0}enabled{else}disabled{/if}">
                                    <i class="fas fa-{if $plan_limits.messages_per_month > 0}check text-success{else}times text-muted{/if} mr-2"></i>
                                    {$plan_limits.messages_per_month|number_format|default:"Unlimited"} messages/month
                                </li>
                                <li class="{if $tenant.config.ai_enabled}enabled{else}disabled{/if}">
                                    <i class="fas fa-{if $tenant.config.ai_enabled}check text-success{else}times text-muted{/if} mr-2"></i>
                                    AI Assistant
                                </li>
                                <li class="{if $tenant.config.kb_enabled}enabled{else}disabled{/if}">
                                    <i class="fas fa-{if $tenant.config.kb_enabled}check text-success{else}times text-muted{/if} mr-2"></i>
                                    Knowledge Base
                                </li>
                                <li class="{if $tenant.config.voice_output_enabled}enabled{else}disabled{/if}">
                                    <i class="fas fa-{if $tenant.config.voice_output_enabled}check text-success{else}times text-muted{/if} mr-2"></i>
                                    Voice Output
                                </li>
                            </ul>

                            <div class="usage-section mt-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Usage This Month</span>
                                    <span class="font-weight-bold">{$stats.usage_percentage|default:"0"}%</span>
                                </div>
                                <div class="progress usage-progress" style="height: 10px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated 
                                                {if $stats.usage_percentage > 80}bg-danger{elseif $stats.usage_percentage > 60}bg-warning{else}bg-success{/if}" 
                                         style="width: {$stats.usage_percentage}%">
                                    </div>
                                </div>
                                <small class="text-muted d-block mt-2">
                                    {$stats.total_messages|number_format|default:"0"} of {$plan_limits.messages_per_month|number_format} used
                                </small>
                                
                                {if $stats.usage_percentage > 80}
                                <div class="alert alert-warning alert-sm mt-3 mb-0">
                                    <i class="fas fa-exclamation-triangle mr-2"></i>
                                    Approaching limit! <a href="upgrade.php?serviceid={$serviceid}" class="alert-link">Upgrade</a>
                                </div>
                                {/if}
                            </div>
                        </div>
                    </div>

                    {* Quick Actions *}
                    <div class="card actions-card border-0 shadow-sm">
                        <div class="card-header bg-transparent border-0 pt-4">
                            <h5 class="card-title">
                                <i class="fas fa-bolt text-warning mr-2"></i>Quick Actions
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="action-grid">
                                <button class="action-btn" onclick="switchToTab('settings')">
                                    <div class="action-icon bg-primary-soft">
                                        <i class="fas fa-cog text-primary"></i>
                                    </div>
                                    <span>Settings</span>
                                </button>
                                
                                <button class="action-btn" onclick="switchToTab('knowledge')">
                                    <div class="action-icon bg-success-soft">
                                        <i class="fas fa-book text-success"></i>
                                    </div>
                                    <span>Knowledge Base</span>
                                </button>
                                
                                <a href="clientarea.php?action=productdetails&id={$serviceid}&modpage=conversations" 
                                   class="action-btn">
                                    <div class="action-icon bg-info-soft">
                                        <i class="fas fa-comments text-info"></i>
                                    </div>
                                    <span>Conversations</span>
                                </a>
                                
                                <button class="action-btn" onclick="reconnectBot()">
                                    <div class="action-icon bg-warning-soft">
                                        <i class="fas fa-sync text-warning"></i>
                                    </div>
                                    <span>Reconnect</span>
                                </button>
                                
                                <a href="clientarea.php?action=productdetails&id={$serviceid}&modpage=logs" 
                                   class="action-btn">
                                    <div class="action-icon bg-secondary-soft">
                                        <i class="fas fa-file-alt text-secondary"></i>
                                    </div>
                                    <span>Logs</span>
                                </a>
                                
                                <a href="submitticket.php?step=2&deptid=1" 
                                   class="action-btn">
                                    <div class="action-icon bg-danger-soft">
                                        <i class="fas fa-life-ring text-danger"></i>
                                    </div>
                                    <span>Support</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {* ==================== SETTINGS TAB ==================== *}
        <div class="tab-pane fade" id="settings-panel" role="tabpanel" aria-labelledby="settings-tab">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-0 pt-4 pb-0">
                    <h3 class="card-title"><i class="fas fa-cog text-primary mr-2"></i>Bot Configuration</h3>
                    <p class="text-muted mb-0">Control how your AI responds to customers</p>
                </div>
                <div class="card-body">
                    
                    <div id="settings-alert-container"></div>
                    
                    <form id="settingsForm">
                        
                        {* AI Settings Section *}
                        <div class="settings-section mb-4">
                            <h5 class="section-title">
                                <i class="fas fa-brain mr-2 text-primary"></i>Artificial Intelligence
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="ai_model">
                                            AI Model
                                            <span class="badge badge-info ml-2">Local Ollama</span>
                                        </label>
                                        <select class="form-control form-control-lg" id="ai_model" name="ai_model">
                                            <option value="llama3.2" {if $settings.ai_model eq 'llama3.2'}selected{/if}>Llama 3.2 (Fast)</option>
                                            <option value="llama3.2:70b" {if $settings.ai_model eq 'llama3.2:70b'}selected{/if}>Llama 3.2 70B (Advanced)</option>
                                            <option value="llava-phi3" {if $settings.ai_model eq 'llava-phi3'}selected{/if}>LLaVA Phi3 (Vision)</option>
                                        </select>
                                        <small class="text-muted">
                                            <i class="fas fa-info-circle mr-1"></i>
                                            Select the AI engine for generating responses. All models run on our secure servers.
                                        </small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="temperature">
                                            Creativity Level (Temperature)
                                            <span class="badge badge-secondary ml-2" id="tempValue">{$settings.temperature|default:"0.7"}</span>
                                        </label>
                                        <input type="range" class="custom-range" id="temperature" name="temperature" 
                                               min="0" max="1" step="0.1" value="{$settings.temperature|default:"0.7"}"
                                               oninput="updateTempValue(this.value)">
                                        <div class="d-flex justify-content-between mt-2">
                                            <small class="text-muted"><i class="fas fa-bullseye mr-1"></i>Precise (0.0)</small>
                                            <small class="text-muted"><i class="fas fa-magic mr-1"></i>Creative (1.0)</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="system_prompt">
                                            System Prompt / Bot Personality
                                            <span class="text-danger">*</span>
                                        </label>
                                        <textarea class="form-control" id="system_prompt" name="system_prompt" rows="5" required 
                                                  placeholder="Example: You are a helpful assistant for [Your Business Name]. Be professional, friendly, and concise. Help customers with product information, pricing, and support questions.">{$settings.system_prompt|default:"You are a helpful AI assistant. Be professional, friendly, and concise."}</textarea>
                                        <small class="text-muted">
                                            <i class="fas fa-lightbulb mr-1"></i>
                                            <strong>Tip:</strong> Define your bot's personality and instructions clearly.
                                        </small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="max_tokens">Max Response Length</label>
                                        <select class="form-control" id="max_tokens" name="max_tokens">
                                            <option value="500" {if $settings.max_tokens eq 500}selected{/if}>Short (500 tokens)</option>
                                            <option value="1000" {if $settings.max_tokens eq 1000}selected{/if}>Medium (1000 tokens)</option>
                                            <option value="2000" {if $settings.max_tokens eq 2000}selected{/if}>Long (2000 tokens)</option>
                                            <option value="4000" {if $settings.max_tokens eq 4000}selected{/if}>Very Long (4000 tokens)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {* Feature Controls Section *}
                        <div class="settings-section mb-4">
                            <h5 class="section-title">
                                <i class="fas fa-toggle-on mr-2 text-success"></i>Feature Controls
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="custom-control custom-switch custom-switch-lg mb-4">
                                        <input type="checkbox" class="custom-control-input" id="kb_enabled" name="kb_enabled" 
                                               {if $settings.kb_enabled|default:true}checked{/if}>
                                        <label class="custom-control-label" for="kb_enabled">
                                            <div class="switch-label-content">
                                                <div class="switch-icon bg-success-soft">
                                                    <i class="fas fa-book text-success"></i>
                                                </div>
                                                <div>
                                                    <strong>Knowledge Base</strong>
                                                    <p class="mb-0 text-muted">Bot checks your knowledge base before generating AI responses</p>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    
                                    <div class="custom-control custom-switch custom-switch-lg mb-4">
                                        <input type="checkbox" class="custom-control-input" id="voice_enabled" name="voice_enabled"
                                               {if $settings.voice_enabled}checked{/if}>
                                        <label class="custom-control-label" for="voice_enabled">
                                            <div class="switch-label-content">
                                                <div class="switch-icon bg-info-soft">
                                                    <i class="fas fa-microphone text-info"></i>
                                                </div>
                                                <div>
                                                    <strong>Voice Output</strong>
                                                    <p class="mb-0 text-muted">Generate voice responses for text messages</p>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="custom-control custom-switch custom-switch-lg mb-4">
                                        <input type="checkbox" class="custom-control-input" id="auto_reply" name="auto_reply"
                                               {if $settings.auto_reply|default:true}checked{/if}>
                                        <label class="custom-control-label" for="auto_reply">
                                            <div class="switch-label-content">
                                                <div class="switch-icon bg-primary-soft">
                                                    <i class="fas fa-reply-all text-primary"></i>
                                                </div>
                                                <div>
                                                    <strong>Auto Reply</strong>
                                                    <p class="mb-0 text-muted">Automatically respond to incoming messages</p>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    
                                    <div class="custom-control custom-switch custom-switch-lg mb-4">
                                        <input type="checkbox" class="custom-control-input" id="image_recognition" name="image_recognition"
                                               {if $settings.image_recognition}checked{/if}>
                                        <label class="custom-control-label" for="image_recognition">
                                            <div class="switch-label-content">
                                                <div class="switch-icon bg-warning-soft">
                                                    <i class="fas fa-image text-warning"></i>
                                                </div>
                                                <div>
                                                    <strong>Image Recognition</strong>
                                                    <p class="mb-0 text-muted">Analyze images sent by customers (AI vision)</p>
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {* Auto-Reply Messages Section *}
                        <div class="settings-section mb-4">
                            <h5 class="section-title">
                                <i class="fas fa-comment-dots mr-2 text-info"></i>Automated Messages
                            </h5>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="welcome_message">Welcome Message</label>
                                        <textarea class="form-control" id="welcome_message" name="welcome_message" rows="4" 
                                                  placeholder="Hi! Welcome to [Your Business]. How can I help you today?">{$settings.welcome_message|default:""}</textarea>
                                        <small class="text-muted">Leave empty to skip welcome message</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="fallback_message">Fallback Message</label>
                                        <textarea class="form-control" id="fallback_message" name="fallback_message" rows="4" 
                                                  placeholder="I'm not sure about that. Let me connect you with our support team.">{$settings.fallback_message|default:""}</textarea>
                                        <small class="text-muted">Used when AI doesn't know the answer</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {* Action Buttons *}
                        <div class="d-flex justify-content-between align-items-center pt-3 border-top">
                            <button type="button" class="btn btn-outline-secondary btn-lg" onclick="switchToTab('overview')">
                                <i class="fas fa-arrow-left mr-2"></i>Back to Overview
                            </button>
                            <div>
                                <button type="button" class="btn btn-outline-danger btn-lg mr-2" onclick="resetSettingsToDefaults()">
                                    <i class="fas fa-undo mr-2"></i>Reset to Defaults
                                </button>
                                <button type="submit" class="btn btn-primary btn-lg px-5 shadow" id="saveSettingsBtn">
                                    <i class="fas fa-save mr-2"></i>Save Settings
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {* ==================== KNOWLEDGE BASE TAB ==================== *}
        <div class="tab-pane fade" id="knowledge-panel" role="tabpanel" aria-labelledby="knowledge-tab">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-transparent border-0 pt-4 pb-0 d-flex justify-content-between align-items-start">
                    <div>
                        <h3 class="card-title">
                            <i class="fas fa-book text-success mr-2"></i>Knowledge Base
                            {if $knowledge_count}
                                <span class="badge badge-success ml-2">{$knowledge_count} entries</span>
                            {/if}
                        </h3>
                        <p class="text-muted mb-0">Train your bot with business-specific information</p>
                    </div>
                    <button class="btn btn-success btn-lg shadow" onclick="showAddKnowledgeModal()">
                        <i class="fas fa-plus mr-2"></i>Add Entry
                    </button>
                </div>
                <div class="card-body">
                    
                    <div id="kb-alert-container"></div>
                    
                    <div class="alert alert-info border-0 shadow-sm">
                        <div class="d-flex align-items-start">
                            <i class="fas fa-info-circle fa-2x text-info mr-3 mt-1"></i>
                            <div>
                                <h6 class="alert-heading mb-2">How Knowledge Base Works</h6>
                                <p class="mb-1">When a customer asks a question, the bot checks these entries <strong>first</strong>.</p>
                                <p class="mb-0">If a match is found, it uses your exact answer instead of generating an AI response.</p>
                            </div>
                        </div>
                    </div>

                    {* Search Box *}
                    <div class="mb-4">
                        <div class="input-group input-group-lg shadow-sm">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white border-right-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control border-left-0 border-right-0" id="searchKnowledge" 
                                   placeholder="Search knowledge entries by keyword or answer..." 
                                   onkeyup="filterKnowledge()">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    {* Knowledge Entries *}
                    <div id="knowledge-container">
                        {if $knowledge_items}
                        <div class="table-responsive">
                            <table class="table table-hover knowledge-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width: 25%"><i class="fas fa-tag mr-2"></i>Keywords / Question</th>
                                        <th style="width: 55%"><i class="fas fa-comment-dots mr-2"></i>Answer</th>
                                        <th style="width: 20%" class="text-right"><i class="fas fa-cog mr-2"></i>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="knowledge-tbody">
                                    {foreach from=$knowledge_items item=item}
                                    <tr class="knowledge-row" data-id="{$item.id}" 
                                        data-keyword="{$item.keyword|lower}" 
                                        data-answer="{$item.answer|lower}">
                                        <td>
                                            <div class="keyword-cell">
                                                <span class="badge badge-primary badge-lg">{$item.keyword}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="answer-preview">
                                                {if strlen($item.answer) > 120}
                                                    {$item.answer|truncate:120:"..."}
                                                {else}
                                                    {$item.answer}
                                                {/if}
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-outline-primary" 
                                                        onclick="editKnowledgeEntry({$item.id}, '{$item.keyword|escape:'javascript'}', '{$item.answer|escape:'javascript'}')"
                                                        data-toggle="tooltip" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-info" 
                                                        onclick="viewKnowledgeEntry({$item.id}, '{$item.keyword|escape:'javascript'}', '{$item.answer|escape:'javascript'}')"
                                                        data-toggle="tooltip" title="View Full">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-danger" 
                                                        onclick="deleteKnowledgeEntry({$item.id}, '{$item.keyword|escape:'javascript'}')"
                                                        data-toggle="tooltip" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="empty-state" id="no-results" style="display:none;">
                            <i class="fas fa-search fa-4x text-muted mb-3"></i>
                            <h5 class="text-muted">No Matching Entries</h5>
                            <p class="text-muted">Try a different search term or <button class="btn btn-link" onclick="clearSearch()">clear search</button></p>
                        </div>
                        {else}
                        <div class="empty-state">
                            <i class="fas fa-folder-open fa-5x text-muted mb-4"></i>
                            <h4 class="text-muted mb-3">No Knowledge Entries Yet</h4>
                            <p class="text-muted mb-4">Start training your bot with business-specific information.<br>Add answers to frequently asked questions.</p>
                            <button class="btn btn-success btn-lg shadow" onclick="showAddKnowledgeModal()">
                                <i class="fas fa-plus mr-2"></i>Create Your First Entry
                            </button>
                            
                            <div class="row mt-5">
                                <div class="col-md-4">
                                    <div class="example-card">
                                        <i class="fas fa-clock fa-2x text-primary mb-3"></i>
                                        <h6>Business Hours</h6>
                                        <small class="text-muted">Keywords: hours, time, open<br>Answer: We're open Mon-Fri 9am-5pm</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="example-card">
                                        <i class="fas fa-dollar-sign fa-2x text-success mb-3"></i>
                                        <h6>Pricing</h6>
                                        <small class="text-muted">Keywords: price, cost, how much<br>Answer: Our basic plan starts at $99/mo</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="example-card">
                                        <i class="fas fa-map-marker-alt fa-2x text-danger mb-3"></i>
                                        <h6>Location</h6>
                                        <small class="text-muted">Keywords: location, address, where<br>Answer: We're located at 123 Main St</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/if}
                    </div>
                    
                    <div class="pt-3 border-top mt-4">
                        <button type="button" class="btn btn-outline-secondary btn-lg" onclick="switchToTab('overview')">
                            <i class="fas fa-arrow-left mr-2"></i>Back to Overview
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {/if}
</div>

{* ==================== MODALS ==================== *}

{* QR Code Modal *}
{if $session.status == 'disconnected'}
<div class="modal fade" id="qrModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-gradient-primary text-white border-0">
                <h5 class="modal-title"><i class="fas fa-qrcode mr-2"></i>Connect WhatsApp</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body text-center p-5">
                <div id="modal-qr-loading">
                    <div class="spinner-grow text-success mb-3"></div>
                    <p>Loading QR Code...</p>
                </div>
                <img id="modal-qr-img" src="" alt="QR Code" class="img-fluid rounded shadow-sm" style="max-width:280px; display:none;">
                <div class="mt-4 text-left bg-light p-3 rounded">
                    <small class="text-muted font-weight-bold">Instructions:</small>
                    <ol class="mb-0 pl-3 mt-2 text-muted">
                        <li>Open WhatsApp on your phone</li>
                        <li>Go to <strong>Settings → Linked Devices</strong></li>
                        <li>Tap <strong>"Link a Device"</strong></li>
                        <li>Scan the QR code above</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{/if}

{* Add Knowledge Modal *}
<div class="modal fade" id="addKnowledgeModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <form id="addKnowledgeForm">
                <div class="modal-header bg-gradient-success text-white border-0">
                    <h5 class="modal-title"><i class="fas fa-plus-circle mr-2"></i>Add Knowledge Entry</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <div class="form-group">
                        <label class="font-weight-bold">Keywords / Question <span class="text-danger">*</span></label>
                        <input type="text" name="keyword" id="add_keyword" class="form-control form-control-lg" 
                               placeholder="e.g., Pricing, Business Hours, Location" required>
                        <small class="text-muted"><i class="fas fa-lightbulb mr-1"></i>Use comma-separated keywords or write the exact question</small>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold">Answer <span class="text-danger">*</span> <span class="badge badge-secondary ml-2" id="charCount">0 / 500</span></label>
                        <textarea name="answer" id="add_answer" class="form-control" rows="6" maxlength="500"
                                  placeholder="The bot will reply with this exact text when keywords match..." 
                                  required oninput="updateCharCount(this)"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-success btn-lg px-4 shadow">
                        <i class="fas fa-save mr-2"></i>Save Entry
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{* Edit Knowledge Modal *}
<div class="modal fade" id="editKnowledgeModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <form id="editKnowledgeForm">
                <input type="hidden" id="edit_entry_id">
                <div class="modal-header bg-gradient-primary text-white border-0">
                    <h5 class="modal-title"><i class="fas fa-edit mr-2"></i>Edit Knowledge Entry</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <div class="form-group">
                        <label class="font-weight-bold">Keywords / Question</label>
                        <input type="text" id="edit_keyword" class="form-control form-control-lg" required>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold">Answer <span class="badge badge-secondary ml-2" id="editCharCount">0 / 500</span></label>
                        <textarea id="edit_answer" class="form-control" rows="6" maxlength="500" 
                                  required oninput="updateEditCharCount(this)"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-lg px-4 shadow">
                        <i class="fas fa-save mr-2"></i>Update Entry
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{* View Knowledge Modal *}
<div class="modal fade" id="viewKnowledgeModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-gradient-info text-white border-0">
                <h5 class="modal-title"><i class="fas fa-eye mr-2"></i>View Knowledge Entry</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="view-section mb-4">
                    <label class="text-muted text-uppercase small font-weight-bold">Keywords</label>
                    <div class="view-content bg-light p-3 rounded" id="view_keyword"></div>
                </div>
                <div class="view-section">
                    <label class="text-muted text-uppercase small font-weight-bold">Answer</label>
                    <div class="view-content bg-light p-3 rounded" id="view_answer" style="white-space: pre-wrap;"></div>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{* ==================== SCRIPTS ==================== *}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3"></script>
<script>
// Global Variables
var serviceId = {$serviceid};
var tenantSlug = '{$tenant.slug}';
var qrAttempts = 0;
var qrTimer = null;

// =====================================================
// TAB NAVIGATION
// =====================================================

// Function to programmatically switch tabs using Bootstrap API
function switchToTab(tabName) {
    console.log('switchToTab called:', tabName);
    
    // Use Bootstrap's tab API to show the tab
    var tabSelector = '#' + tabName + '-tab';
    var $tab = jQuery(tabSelector);
    
    if ($tab.length && typeof $tab.tab === 'function') {
        $tab.tab('show');
    } else {
        // Fallback: manually activate tab
        jQuery('.nav-pills .nav-link').removeClass('active').attr('aria-selected', 'false');
        jQuery('.tab-pane').removeClass('show active');
        
        $tab.addClass('active').attr('aria-selected', 'true');
        jQuery('#' + tabName + '-panel').addClass('show active');
    }
    
    // Update URL hash
    history.replaceState(null, null, '#' + tabName);
    
    // Save to sessionStorage
    sessionStorage.setItem('whatsapp_bot_active_tab', tabName);
}

// Handle URL hash for direct tab access on page load
jQuery(document).ready(function() {
    // Check URL hash or sessionStorage for active tab
    var hash = window.location.hash.replace('#', '');
    var savedTab = sessionStorage.getItem('whatsapp_bot_active_tab');
    var activeTab = hash || savedTab || 'overview';
    
    console.log('Page load - hash:', hash, 'savedTab:', savedTab, 'activeTab:', activeTab);
    
    // Activate the tab if it's not overview (overview is already active by default)
    if (activeTab && activeTab !== 'overview') {
        // Small delay to ensure Bootstrap is ready
        setTimeout(function() {
            switchToTab(activeTab);
        }, 100);
    }
    
    // Update URL hash when tab changes (Bootstrap event)
    jQuery('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
        var tabId = jQuery(e.target).attr('href').replace('#', '');
        history.replaceState(null, null, '#' + tabId);
        sessionStorage.setItem('whatsapp_bot_active_tab', tabId);
        console.log('Tab changed to:', tabId);
    });
    
    // Initialize tooltips
    jQuery('[data-toggle="tooltip"]').tooltip();
});

// =====================================================
// QR CODE LOADER
// =====================================================
function loadQRCode() {
    document.getElementById('qr-loading').style.display = 'block';
    document.getElementById('qr-loaded').style.display = 'none';
    document.getElementById('qr-error').style.display = 'none';
    qrAttempts = 0;
    fetchQR();
}

function fetchQR() {
    if (qrAttempts >= 15) {
        document.getElementById('qr-loading').style.display = 'none';
        document.getElementById('qr-error').style.display = 'block';
        return;
    }
    qrAttempts++;
    
    var url = 'modules/servers/whatsappbot/ajax/getqr.php?serviceid=' + serviceId;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 500) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    
                    if (data.success && data.qr_code) {
                        document.getElementById('qr-img').src = 'data:image/png;base64,' + data.qr_code;
                        document.getElementById('qr-loading').style.display = 'none';
                        document.getElementById('qr-loaded').style.display = 'block';

                        var modalImg = document.getElementById('modal-qr-img');
                        if (modalImg) {
                            modalImg.src = 'data:image/png;base64,' + data.qr_code;
                            modalImg.style.display = 'block';
                        }
                        var modalLoading = document.getElementById('modal-qr-loading');
                        if (modalLoading) {
                            modalLoading.style.display = 'none';
                        }

                        startQRTimer();
                        setTimeout(checkConnection, 5000);
                    } else {
                        setTimeout(fetchQR, 2000);
                    }
                } catch(e) {
                    setTimeout(fetchQR, 2000);
                }
            } else {
                setTimeout(fetchQR, 2000);
            }
        }
    };
    xhr.send();
}

function startQRTimer() {
    var width = 100;
    var timerBar = document.getElementById('qrTimer');
    if (qrTimer) clearInterval(qrTimer);
    qrTimer = setInterval(function() {
        width -= 1.67;
        if (width <= 0) {
            clearInterval(qrTimer);
            loadQRCode();
        }
        if (timerBar) timerBar.style.width = width + '%';
    }, 1000);
}

function checkConnection() {
    var url = 'modules/servers/whatsappbot/ajax/checkstatus.php?serviceid=' + serviceId;
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            try {
                var data = JSON.parse(xhr.responseText);
                
                if (data.connected) {
                    location.reload();
                } else {
                    setTimeout(checkConnection, 5000);
                }
            } catch(e) {
                setTimeout(checkConnection, 5000);
            }
        }
    };
    xhr.send();
}

// =====================================================
// SETTINGS MANAGEMENT
// =====================================================
function updateTempValue(value) {
    document.getElementById('tempValue').textContent = value;
}

function showSettingsAlert(type, title, message) {
    var alertHtml = '<div class="alert alert-' + type + ' alert-dismissible fade show shadow-sm" role="alert">' +
        '<h5 class="alert-heading mb-2"><i class="fas fa-' + (type === 'success' ? 'check-circle' : 'exclamation-circle') + ' mr-2"></i>' + title + '</h5>' +
        '<p class="mb-0">' + message + '</p>' +
        '<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button></div>';
    document.getElementById('settings-alert-container').innerHTML = alertHtml;
    
    setTimeout(function() {
        jQuery('.alert').alert('close');
    }, 5000);
}

// Save settings via AJAX
document.getElementById('settingsForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    var saveBtn = document.getElementById('saveSettingsBtn');
    var originalHtml = saveBtn.innerHTML;
    
    saveBtn.disabled = true;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';
    
    var formData = {
        tenant_slug: tenantSlug,
        ai_model: document.getElementById('ai_model').value,
        temperature: parseFloat(document.getElementById('temperature').value),
        system_prompt: document.getElementById('system_prompt').value,
        max_tokens: parseInt(document.getElementById('max_tokens').value),
        kb_enabled: document.getElementById('kb_enabled').checked,
        voice_enabled: document.getElementById('voice_enabled').checked,
        auto_reply: document.getElementById('auto_reply').checked,
        image_recognition: document.getElementById('image_recognition').checked,
        welcome_message: document.getElementById('welcome_message').value,
        fallback_message: document.getElementById('fallback_message').value
    };
    
    fetch('modules/servers/whatsappbot/ajax/save_settings.php?serviceid=' + serviceId, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showSettingsAlert('success', 'Settings Saved Successfully!', 
                'Your bot configuration has been updated and synced to the gateway.');
            
            saveBtn.innerHTML = '<i class="fas fa-check mr-2"></i>Saved!';
            saveBtn.classList.remove('btn-primary');
            saveBtn.classList.add('btn-success');
            
            setTimeout(function() {
                saveBtn.innerHTML = originalHtml;
                saveBtn.classList.remove('btn-success');
                saveBtn.classList.add('btn-primary');
                saveBtn.disabled = false;
            }, 2000);
        } else {
            throw new Error(data.error || 'Failed to save settings');
        }
    })
    .catch(error => {
        showSettingsAlert('danger', 'Error Saving Settings', error.message);
        saveBtn.innerHTML = originalHtml;
        saveBtn.disabled = false;
    });
});

// Reset settings to defaults
function resetSettingsToDefaults() {
    Swal.fire({
        title: 'Reset to Defaults?',
        text: "This will reset all settings to their default values.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, reset',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed) {
            document.getElementById('ai_model').value = 'llama3.2';
            document.getElementById('temperature').value = 0.7;
            updateTempValue(0.7);
            document.getElementById('system_prompt').value = 'You are a helpful AI assistant. Be professional, friendly, and concise.';
            document.getElementById('max_tokens').value = 1000;
            document.getElementById('kb_enabled').checked = true;
            document.getElementById('voice_enabled').checked = false;
            document.getElementById('auto_reply').checked = true;
            document.getElementById('image_recognition').checked = false;
            document.getElementById('welcome_message').value = '';
            document.getElementById('fallback_message').value = '';
            
            Swal.fire({
                icon: 'info',
                title: 'Defaults Restored',
                text: 'Settings have been reset. Click "Save Settings" to apply.',
                timer: 2000,
                showConfirmButton: false
            });
        }
    });
}

// =====================================================
// KNOWLEDGE BASE MANAGEMENT
// =====================================================
function updateCharCount(textarea) {
    document.getElementById('charCount').textContent = textarea.value.length + ' / 500';
}

function updateEditCharCount(textarea) {
    document.getElementById('editCharCount').textContent = textarea.value.length + ' / 500';
}

function filterKnowledge() {
    var searchTerm = document.getElementById('searchKnowledge').value.toLowerCase();
    var rows = document.querySelectorAll('.knowledge-row');
    var noResults = document.getElementById('no-results');
    var visibleCount = 0;
    
    rows.forEach(function(row) {
        var keyword = row.dataset.keyword;
        var answer = row.dataset.answer;
        
        if (keyword.includes(searchTerm) || answer.includes(searchTerm)) {
            row.style.display = '';
            visibleCount++;
        } else {
            row.style.display = 'none';
        }
    });
    
    if (visibleCount === 0 && searchTerm !== '') {
        document.querySelector('.table-responsive').style.display = 'none';
        noResults.style.display = 'block';
    } else {
        document.querySelector('.table-responsive').style.display = 'block';
        noResults.style.display = 'none';
    }
}

function clearSearch() {
    document.getElementById('searchKnowledge').value = '';
    filterKnowledge();
}

function showAddKnowledgeModal() {
    document.getElementById('add_keyword').value = '';
    document.getElementById('add_answer').value = '';
    updateCharCount({ value: '' });
    jQuery('#addKnowledgeModal').modal('show');
}

// Add knowledge entry via AJAX
document.getElementById('addKnowledgeForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    var data = {
        tenant_slug: tenantSlug,
        keyword: document.getElementById('add_keyword').value,
        answer: document.getElementById('add_answer').value
    };
    
    fetch('modules/servers/whatsappbot/ajax/save_knowledge.php?serviceid=' + serviceId, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(function(result) {
        if (result.success) {
            jQuery('#addKnowledgeModal').modal('hide');
            Swal.fire({
                icon: 'success',
                title: 'Entry Added!',
                text: 'Knowledge entry has been saved and synced to bot gateway',
                timer: 2000,
                showConfirmButton: false
            }).then(function() {
                sessionStorage.setItem('whatsapp_bot_active_tab', 'knowledge');
                location.reload();
            });
        } else {
            throw new Error(result.error || 'Failed to save');
        }
    })
    .catch(function(error) {
        Swal.fire({ icon: 'error', title: 'Error', text: error.message });
    });
});

function editKnowledgeEntry(id, keyword, answer) {
    document.getElementById('edit_entry_id').value = id;
    document.getElementById('edit_keyword').value = keyword;
    document.getElementById('edit_answer').value = answer;
    updateEditCharCount({ value: answer });
    jQuery('#editKnowledgeModal').modal('show');
}

// Update knowledge entry via AJAX
document.getElementById('editKnowledgeForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    var data = {
        id: document.getElementById('edit_entry_id').value,
        tenant_slug: tenantSlug,
        keyword: document.getElementById('edit_keyword').value,
        answer: document.getElementById('edit_answer').value
    };
    
    fetch('modules/servers/whatsappbot/ajax/update_knowledge.php?serviceid=' + serviceId, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(function(result) {
        if (result.success) {
            jQuery('#editKnowledgeModal').modal('hide');
            Swal.fire({
                icon: 'success',
                title: 'Entry Updated!',
                text: 'Knowledge entry has been updated and synced to gateway',
                timer: 2000,
                showConfirmButton: false
            }).then(function() {
                sessionStorage.setItem('whatsapp_bot_active_tab', 'knowledge');
                location.reload();
            });
        } else {
            throw new Error(result.error || 'Failed to update');
        }
    })
    .catch(function(error) {
        Swal.fire({ icon: 'error', title: 'Error', text: error.message });
    });
});

function viewKnowledgeEntry(id, keyword, answer) {
    document.getElementById('view_keyword').textContent = keyword;
    document.getElementById('view_answer').textContent = answer;
    jQuery('#viewKnowledgeModal').modal('show');
}

function deleteKnowledgeEntry(id, keyword) {
    Swal.fire({
        title: 'Delete Knowledge Entry?',
        html: 'Are you sure you want to delete:<br><strong class="text-danger">' + keyword + '</strong><br><br>This action cannot be undone.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="fas fa-trash mr-2"></i>Yes, delete it',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed) {
            fetch('modules/servers/whatsappbot/ajax/delete_knowledge.php?serviceid=' + serviceId + '&id=' + id, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(function(data) {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Deleted!',
                        text: 'Knowledge entry has been removed',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        sessionStorage.setItem('whatsapp_bot_active_tab', 'knowledge');
                        location.reload();
                    });
                }
            });
        }
    });
}

// =====================================================
// RECONNECT BOT
// =====================================================
function reconnectBot() {
    Swal.fire({
        title: 'Reconnect WhatsApp?',
        text: "This will generate a new QR code for connection",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#25D366',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, reconnect',
        cancelButtonText: 'Cancel'
    }).then(function(result) {
        if (result.isConfirmed) {
            jQuery.post('clientarea.php?action=productdetails&id=' + serviceId + '&modpage=reconnect', function(data) {
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Reconnection Initiated',
                        text: 'Please scan the new QR code',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.error || 'Failed to reconnect'
                    });
                }
            });
        }
    });
}

// =====================================================
// CHART INITIALIZATION
// =====================================================
{if $chart_labels && $chart_sent_data}
var ctx = document.getElementById('usageChart').getContext('2d');
var gradientSent = ctx.createLinearGradient(0, 0, 0, 400);
gradientSent.addColorStop(0, 'rgba(37, 211, 102, 0.2)');
gradientSent.addColorStop(1, 'rgba(37, 211, 102, 0)');

var gradientReceived = ctx.createLinearGradient(0, 0, 0, 400);
gradientReceived.addColorStop(0, 'rgba(18, 140, 126, 0.2)');
gradientReceived.addColorStop(1, 'rgba(18, 140, 126, 0)');

var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {$chart_labels|json_encode},
        datasets: [{
            label: 'Sent',
            data: {$chart_sent_data|json_encode},
            borderColor: '#25D366',
            backgroundColor: gradientSent,
            borderWidth: 3,
            tension: 0.4,
            fill: true,
            pointBackgroundColor: '#25D366',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 4,
            pointHoverRadius: 6
        }, {
            label: 'Received',
            data: {$chart_received_data|json_encode},
            borderColor: '#128C7E',
            backgroundColor: gradientReceived,
            borderWidth: 3,
            tension: 0.4,
            fill: true,
            pointBackgroundColor: '#128C7E',
            pointBorderColor: '#fff',
            pointBorderWidth: 2,
            pointRadius: 4,
            pointHoverRadius: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { intersect: false, mode: 'index' },
        plugins: {
            legend: {
                position: 'top',
                align: 'end',
                labels: { usePointStyle: true, padding: 20, font: { family: "'Segoe UI', sans-serif", size: 12 } }
            },
            tooltip: {
                backgroundColor: 'rgba(0,0,0,0.8)',
                padding: 12,
                cornerRadius: 8
            }
        },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 11 }, color: '#6c757d' } },
            y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false }, ticks: { font: { size: 11 }, color: '#6c757d', padding: 10 } }
        }
    }
});
{/if}

// Start loading QR code when page loads
window.addEventListener('load', function() {
    {if $session.status neq 'connected' && $tenant.status neq 'suspended'}
    loadQRCode();
    {/if}
});
</script>

<style>
/* WhatsApp Brand Colors */
:root {
    --whatsapp-green: #25D366;
    --whatsapp-dark: #128C7E;
    --whatsapp-teal: #075E54;
}

.whatsapp-bot-dashboard {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #2c3e50;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Tab Navigation */
.main-tabs-wrapper {
    background: white;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.main-tabs {
    display: flex;
    gap: 8px;
}

.main-tabs .nav-link {
    border-radius: 12px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 1rem;
    color: #6c757d;
    background: transparent;
    border: none;
    transition: all 0.3s;
}

.main-tabs .nav-link:hover {
    background: #f8f9fa;
    color: #2c3e50;
}

.main-tabs .nav-link.active {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

/* Status Banner */
.status-banner {
    border-radius: 16px;
    padding: 24px 32px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.status-connected { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
.status-disconnected { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }
.status-connecting { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); }

.status-content {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.status-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 2.5rem;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.status-text h3 { margin: 0 0 8px 0; font-size: 1.75rem; font-weight: 700; }
.status-text p { font-size: 1.1rem; opacity: 0.95; }
.status-action { margin-left: auto; }

/* QR Section */
.qr-section .card {
    border-radius: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.qr-wrapper {
    padding: 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

.qr-glow {
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    background: linear-gradient(45deg, #25D366, #128C7E, #25D366);
    border-radius: 30px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow { from { opacity: 0.3; } to { opacity: 0.6; } }

.qr-image { max-width: 280px; border-radius: 12px; display: block; }

.qr-refresh-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: white;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
}

.qr-wrapper:hover .qr-refresh-overlay { opacity: 1; }

.steps-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.step-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step-number {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}
.step-arrow { color: #adb5bd; font-size: 0.8rem; }

/* Stats Cards */
.stats-row { margin: 0 -10px; }

.stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.stat-card.sent { border-top: 4px solid #25D366; }
.stat-card.received { border-top: 4px solid #128C7E; }
.stat-card.ai { border-top: 4px solid #667eea; }
.stat-card.voice { border-top: 4px solid #f093fb; }

.stat-icon {
    width: 50px; height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.stat-card.sent .stat-icon { background: rgba(37, 211, 102, 0.1); color: #25D366; }
.stat-card.received .stat-icon { background: rgba(18, 140, 126, 0.1); color: #128C7E; }
.stat-card.ai .stat-icon { background: rgba(102, 126, 234, 0.1); color: #667eea; }
.stat-card.voice .stat-icon { background: rgba(240, 147, 251, 0.1); color: #f093fb; }

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label { color: #6c757d; font-size: 0.9rem; margin: 4px 0 0 0; font-weight: 500; }

.stat-trend { margin-top: 12px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; }
.trend-up { color: #27ae60; }
.trend-down { color: #e74c3c; }
.stat-trend span { color: #adb5bd; font-weight: 400; margin-left: 4px; }

.stat-model .badge {
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.stat-sub { margin-top: 8px; font-size: 0.85rem; color: #6c757d; font-weight: 500; }

.stat-decoration {
    position: absolute;
    top: -20px; right: -20px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%);
    border-radius: 50%;
}

/* Cards */
.card {
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s;
}

.card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.card-title { font-weight: 700; font-size: 1.1rem; color: #2c3e50; }

/* Settings Sections */
.settings-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #dee2e6;
    position: relative;
    overflow: hidden;
}

.settings-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #25D366, #128C7E);
}

.section-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: #2c3e50;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dee2e6;
}

/* Custom Switch Styling */
.custom-switch-lg { padding-left: 0; }
.custom-switch-lg .custom-control-label { cursor: pointer; width: 100%; }
.custom-switch-lg .custom-control-label::before { width: 3.5rem; height: 2rem; border-radius: 2rem; left: 0; top: 0; background-color: #ced4da; border: none; }
.custom-switch-lg .custom-control-label::after { width: 1.75rem; height: 1.75rem; border-radius: 50%; left: 2px; top: 2px; }
.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::before { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
.switch-label-content { display: flex; align-items: flex-start; gap: 16px; margin-left: 4.5rem; }
.switch-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.switch-label-content strong { font-size: 1.05rem; color: #2c3e50; display: block; margin-bottom: 4px; }
.switch-label-content p { font-size: 0.9rem; line-height: 1.4; }

.form-control:focus, .custom-range:focus { border-color: #25D366; box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.25); }
.form-control-lg { font-size: 1.05rem; padding: 0.75rem 1rem; }

.custom-range { height: 1.5rem; }
.custom-range::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.custom-range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.custom-range::-webkit-slider-runnable-track { height: 0.5rem; background: linear-gradient(90deg, #e9ecef 0%, #25D366 100%); border-radius: 1rem; }

/* Knowledge Table */
.knowledge-table { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.knowledge-table thead th { font-weight: 600; color: #495057; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 16px; border-bottom: 2px solid #e9ecef; background: #f8f9fa; }
.knowledge-table tbody tr { transition: all 0.3s; }
.knowledge-table tbody tr:hover { background: #f8f9fa; transform: scale(1.01); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.knowledge-table tbody td { padding: 16px; vertical-align: middle; border-color: #f1f3f4; }
.keyword-cell { display: flex; align-items: center; gap: 8px; }
.badge-lg { font-size: 0.9rem; padding: 8px 14px; font-weight: 600; border-radius: 8px; }
.answer-preview { color: #495057; line-height: 1.5; font-size: 0.95rem; }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; }
.example-card { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.3s; text-align: center; }
.example-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

/* Conversations Table */
.conversations-card .table th { font-weight: 600; color: #6c757d; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 16px; }
.conversation-row td { padding: 16px; vertical-align: middle; border-color: #f8f9fa; }
.avatar-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.message-preview { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #495057; }
.btn-rounded { border-radius: 20px; padding: 6px 16px; font-size: 0.85rem; font-weight: 600; }

/* Plan Card */
.plan-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); }
.plan-badge { display: flex; align-items: center; justify-content: space-between; }
.plan-name { font-size: 1.25rem; font-weight: 800; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.status-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(0,0,0,0.05); color: #6c757d; }
.status-badge.active { background: rgba(37, 211, 102, 0.1); color: #25D366; }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: 10px 0; border-bottom: 1px solid #f1f3f4; font-size: 0.9rem; display: flex; align-items: center; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li.disabled { opacity: 0.5; }

.usage-progress { border-radius: 10px; background: #e9ecef; overflow: hidden; }
.usage-progress .progress-bar { border-radius: 10px; }

/* Quick Actions Grid */
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.action-btn { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; border-radius: 12px; text-decoration: none; color: #495057; transition: all 0.3s; border: 1px solid #f1f3f4; background: white; cursor: pointer; border: none; }
.action-btn:hover { background: #f8f9fa; transform: translateY(-2px); text-decoration: none; color: #2c3e50; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.action-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 8px; }
.bg-primary-soft { background: rgba(0, 123, 255, 0.1); }
.bg-success-soft { background: rgba(40, 167, 69, 0.1); }
.bg-info-soft { background: rgba(23, 162, 184, 0.1); }
.bg-warning-soft { background: rgba(255, 193, 7, 0.1); }
.bg-secondary-soft { background: rgba(108, 117, 125, 0.1); }
.bg-danger-soft { background: rgba(220, 53, 69, 0.1); }
.action-btn span { font-size: 0.8rem; font-weight: 600; }

/* Gradients */
.bg-gradient-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-success { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); }
.bg-gradient-info { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); }

/* Buttons */
.btn-primary { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); border: none; font-weight: 600; letter-spacing: 0.5px; transition: all 0.3s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); }
.btn-outline-danger:hover { transform: translateY(-2px); }
.badge { font-weight: 600; padding: 6px 12px; border-radius: 6px; }

/* Modal Styling */
.modal-content { border-radius: 20px; overflow: hidden; }
.modal-header { padding: 20px 24px; }
.view-section label { margin-bottom: 8px; }
.view-content { font-size: 1rem; line-height: 1.6; border: 1px solid #dee2e6; }

/* Search Box */
.input-group-lg .form-control { font-size: 1.05rem; padding: 0.75rem 1rem; border-radius: 0; }
.input-group-lg .input-group-text { padding: 0.75rem 1rem; border-radius: 0; }

/* Responsive */
@media (max-width: 768px) {
    .status-content { flex-direction: column; text-align: center; }
    .status-action { margin-left: 0; margin-top: 16px; }
    .steps-container { flex-direction: column; }
    .step-arrow { transform: rotate(90deg); }
    .action-grid { grid-template-columns: repeat(3, 1fr); }
    .main-tabs .nav-link { padding: 10px 16px; font-size: 0.9rem; }
    .main-tabs .nav-link i { display: none; }
    .d-flex.justify-content-between { flex-direction: column; gap: 12px; }
    .d-flex.justify-content-between > div { width: 100%; display: flex; flex-direction: column; gap: 12px; }
    .btn-lg { width: 100%; }
}

/* SweetAlert Customization */
.swal2-popup { border-radius: 16px !important; font-family: 'Segoe UI', sans-serif !important; }
.swal2-confirm { background: #25D366 !important; border-radius: 8px !important; font-weight: 600 !important; }
.swal2-cancel { border-radius: 8px !important; font-weight: 600 !important; }
</style>