@extends('layouts.master')

@section('title', 'Help Center')

@section('content')
<div class="container-fluid">
    <!-- Hero Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="help-hero">
                <div class="help-hero-content">
                    <h1 class="display-5 fw-bold mb-3">
                        <i class="fas fa-balance-scale me-3"></i>
                        How can we help you today?
                    </h1>
                    <p class="lead mb-4">Search our knowledge base or browse categories below</p>
                    
                    <!-- Enhanced Search Bar -->
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="search-wrapper">
                                <i class="fas fa-search search-icon"></i>
                                <input type="text" class="form-control form-control-lg search-input" 
                                       id="helpSearch" 
                                       placeholder="Search for help articles, FAQs, or topics..."
                                       autocomplete="off">
                                <div id="searchResults" class="search-results-dropdown"></div>
                            </div>
                            <!-- Quick Links -->
                            <div class="quick-links mt-3">
                                <span class="text-muted me-2">Popular:</span>
                                <a href="#" class="badge bg-light text-dark me-2" data-search="case management">Case Management</a>
                                <a href="#" class="badge bg-light text-dark me-2" data-search="billing">Billing & Invoicing</a>
                                <a href="#" class="badge bg-light text-dark me-2" data-search="document">Document Templates</a>
                                <a href="#" class="badge bg-light text-dark" data-search="calendar">Calendar & Scheduling</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Access Cards -->
    <div class="row mb-5">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="quick-access-card" data-category="getting-started">
                <div class="icon-wrapper bg-primary-soft">
                    <i class="fas fa-rocket text-primary"></i>
                </div>
                <h5 class="mt-3">Getting Started</h5>
                <p class="text-muted small mb-0">Setup guides and onboarding</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="quick-access-card" data-category="video-tutorials">
                <div class="icon-wrapper bg-danger-soft">
                    <i class="fas fa-play-circle text-danger"></i>
                </div>
                <h5 class="mt-3">Video Tutorials</h5>
                <p class="text-muted small mb-0">Watch step-by-step guides</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="quick-access-card" data-category="best-practices">
                <div class="icon-wrapper bg-success-soft">
                    <i class="fas fa-lightbulb text-success"></i>
                </div>
                <h5 class="mt-3">Best Practices</h5>
                <p class="text-muted small mb-0">Tips from legal experts</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="quick-access-card" data-category="troubleshooting">
                <div class="icon-wrapper bg-warning-soft">
                    <i class="fas fa-tools text-warning"></i>
                </div>
                <h5 class="mt-3">Troubleshooting</h5>
                <p class="text-muted small mb-0">Fix common issues</p>
            </div>
        </div>
    </div>

    <!-- Help Topics with Tabs -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <!-- Tab Navigation -->
                    <ul class="nav nav-pills help-tabs mb-4" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#all-topics" type="button">
                                <i class="fas fa-th-large me-2"></i>All Topics
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#case-mgmt" type="button">
                                <i class="fas fa-briefcase me-2"></i>Case Management
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#billing" type="button">
                                <i class="fas fa-file-invoice-dollar me-2"></i>Billing
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#documents" type="button">
                                <i class="fas fa-file-alt me-2"></i>Documents
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#reports" type="button">
                                <i class="fas fa-chart-bar me-2"></i>Reports
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="all-topics">
                            <div class="row" id="helpTopicsContainer">
                                @foreach($helpTopics as $topic)
                                <div class="col-lg-4 col-md-6 mb-4 help-topic-wrapper" data-category="{{ strtolower($topic['title']) }}">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle {{ $topic['colorClass'] ?? 'bg-primary-soft' }}">
                                                <i class="{{ $topic['icon'] }} {{ $topic['iconColor'] ?? 'text-primary' }}"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">{{ $topic['title'] }}</h5>
                                            <p class="text-muted small mb-3">{{ $topic['description'] }}</p>
                                            
                                            <div class="article-list">
                                                @foreach($topic['articles'] as $index => $article)
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal" 
                                                     data-title="{{ $article['title'] }}" 
                                                     data-content="{{ $article['content'] }}">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>{{ $article['title'] }}</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                @endforeach
                                            </div>
                                            
                                            <a href="#" class="btn btn-link btn-sm p-0 mt-3">
                                                View all articles <i class="fas fa-arrow-right ms-1"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        
                        <!-- Other tab panes would follow similar structure -->
                        <div class="tab-pane fade" id="case-mgmt">
                            <div class="row align-items-center mb-4">
                                <div class="col-lg-8">
                                    <h4 class="mb-2">Case Management Playbook</h4>
                                    <p class="text-muted mb-0">Open matters fast, keep clients informed, and close with full compliance.</p>
                                </div>
                                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                    <span class="badge bg-light text-dark me-2">Intake</span>
                                    <span class="badge bg-light text-dark me-2">Deadlines</span>
                                    <span class="badge bg-light text-dark">Closure</span>
                                </div>
                            </div>

                            <div class="row" id="caseMgmtContainer">
                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-primary-soft">
                                                <i class="fas fa-folder-open text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Opening a New Case</h5>
                                            <p class="text-muted small mb-3">Start matters the right way</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="How to create a new matter"
                                                     data-content="Navigate to Cases > New Matter. Fill in the matter name, client, case type, and assigned attorney. Save to generate a unique matter number automatically.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>How to create a new matter</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Assigning clients to a case"
                                                     data-content="On the matter detail page, click 'Assign Client'. Search by name or ID and confirm. One case can be linked to multiple clients if required.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Assigning clients to a case</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Setting case priority and status"
                                                     data-content="From the matter overview, use the Priority and Status dropdowns. Options include Draft, Active, On Hold, and Closed. Changes are logged in the activity trail.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Setting case priority &amp; status</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Checklist Ready</span>
                                                <span class="badge bg-light text-dark">Auto Numbering</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-success-soft">
                                                <i class="fas fa-users text-success"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Client Management</h5>
                                            <p class="text-muted small mb-3">Manage client relationships</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Adding and editing client profiles"
                                                     data-content="Go to Clients > Add New. Enter contact details, ID number, and communication preferences. Existing profiles can be edited from the client detail page.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Adding &amp; editing client profiles</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Linking multiple cases to one client"
                                                     data-content="From a client profile, click 'Linked Matters'. Use the search to attach existing matters or create a new one directly from this view.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Linking multiple cases to one client</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Client communication logs"
                                                     data-content="Every email, note, and call logged against a client is visible under the Communications tab on the client profile. Filter by date, type, or assigned attorney.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Client communication logs</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Contact History</span>
                                                <span class="badge bg-light text-dark">Multi-Client</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-warning-soft">
                                                <i class="fas fa-calendar-check text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Deadlines &amp; Tasks</h5>
                                            <p class="text-muted small mb-3">Never miss a critical date</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Setting case deadlines"
                                                     data-content="Open the matter and go to the Deadlines tab. Click 'Add Deadline', enter the date, description, and responsible attorney. Deadlines sync to the firm calendar automatically.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Setting case deadlines</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Creating and assigning tasks"
                                                     data-content="From the Tasks panel on any matter, click 'New Task'. Set the title, due date, priority, and assignee. Assigned users receive an in-app and email notification.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Creating &amp; assigning tasks</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Deadline reminder notifications"
                                                     data-content="Configure reminder intervals under Settings > Notifications. Default reminders are sent 7, 3, and 1 day before a deadline. Custom intervals can be set per matter.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Deadline reminder notifications</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Auto Reminders</span>
                                                <span class="badge bg-light text-dark">Calendar Sync</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-danger-soft">
                                                <i class="fas fa-lock text-danger"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Case Closure</h5>
                                            <p class="text-muted small mb-3">Wrap up matters properly</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Closing and archiving a case"
                                                     data-content="Change the case status to Closed from the matter overview. You will be prompted to confirm all tasks are resolved and all invoices are settled before archiving.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Closing and archiving a case</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Generating closing reports"
                                                     data-content="After closing, navigate to Reports > Matter Summary. Select the closed matter to generate a full activity, billing, and document summary exportable as PDF.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Generating closing reports</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Post-closure record retention"
                                                     data-content="Archived cases are retained for 7 years by default per firm policy. You can adjust the retention period under Settings > Data Retention for specific matter types.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Post-closure record retention</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Compliance Ready</span>
                                                <span class="badge bg-light text-dark">Archive Flow</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="alert alert-light border d-flex flex-wrap align-items-center justify-content-between">
                                        <div class="me-3">
                                            <strong>Pro tip:</strong> Standardize your intake checklist to reduce rework and missing fields.
                                        </div>
                                        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                data-title="Matter intake checklist"
                                                data-content="Use a standard intake checklist: client details, conflict check, matter type, assigned attorney, expected timeline, and initial documents. Save as a template for repeat use.">
                                            View checklist
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="billing">
                            <div class="row align-items-center mb-4">
                                <div class="col-lg-8">
                                    <h4 class="mb-2">Billing & Collections</h4>
                                    <p class="text-muted mb-0">Track time, issue invoices, and collect payments with clarity.</p>
                                </div>
                                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                    <span class="badge bg-light text-dark me-2">Time</span>
                                    <span class="badge bg-light text-dark me-2">Invoices</span>
                                    <span class="badge bg-light text-dark">Payments</span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-primary-soft">
                                                <i class="fas fa-stopwatch text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Time Tracking</h5>
                                            <p class="text-muted small mb-3">Log billable hours accurately</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Recording time entries"
                                                     data-content="Use the timer button on any matter page, or go to Billing > Time Entries > Add Entry. Specify the matter, duration, activity type, and billing rate.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Recording time entries</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Setting hourly billing rates"
                                                     data-content="Billing rates can be set per attorney under Settings > Billing Rates, or overridden per matter on the matter's billing settings page.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Setting hourly billing rates</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Editing or deleting time logs"
                                                     data-content="Go to Billing > Time Entries. Click the entry you want to edit. Administrators can delete entries; regular users can only edit entries from the current billing period.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Editing or deleting time logs</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Timers</span>
                                                <span class="badge bg-light text-dark">Approvals</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-success-soft">
                                                <i class="fas fa-file-invoice text-success"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Invoicing</h5>
                                            <p class="text-muted small mb-3">Create and send invoices</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Generating an invoice from time entries"
                                                     data-content="Go to Billing > Invoices > New Invoice. Select the matter and date range. Unbilled time entries will be pulled automatically. Review and click Generate.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Generating an invoice from time entries</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Adding expenses to an invoice"
                                                     data-content="When reviewing a draft invoice, click 'Add Expense'. Enter the amount, description, and receipt if required. Expenses are itemised separately from time entries on the final invoice.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Adding expenses to an invoice</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Sending invoices to clients"
                                                     data-content="From a finalised invoice, click 'Send'. Choose to deliver via email directly from the system or download as PDF to send manually.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Sending invoices to clients</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Templates</span>
                                                <span class="badge bg-light text-dark">PDF</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-warning-soft">
                                                <i class="fas fa-hand-holding-usd text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Payments</h5>
                                            <p class="text-muted small mb-3">Track and record payments</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Recording a payment received"
                                                     data-content="Open the relevant invoice and click 'Record Payment'. Enter the amount, payment method, and date. The invoice status updates to Paid automatically when the full balance is settled.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Recording a payment received</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Partial payments and payment plans"
                                                     data-content="Partial payments can be recorded on any invoice. The outstanding balance will display automatically. Use the Payment Plan feature to schedule future expected payments.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Partial payments &amp; payment plans</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Handling overdue invoices"
                                                     data-content="Invoices past their due date are flagged in red. Use the Overdue filter in Billing > Invoices. Send a payment reminder directly from the invoice detail page.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Handling overdue invoices</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Auto Status</span>
                                                <span class="badge bg-light text-dark">Reminders</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-danger-soft">
                                                <i class="fas fa-chart-pie text-danger"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Billing Reports</h5>
                                            <p class="text-muted small mb-3">Monitor revenue &amp; outstanding</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Running a billing summary report"
                                                     data-content="Go to Reports > Billing Summary. Filter by attorney, date range, and matter type. The report shows total billed, collected, and outstanding amounts.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Running a billing summary report</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Viewing outstanding balances"
                                                     data-content="Navigate to Billing > Accounts Receivable. The ageing report shows balances grouped by 0-30, 31-60, 61-90, and 90+ days overdue.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Viewing outstanding balances</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Exporting billing data"
                                                     data-content="Any billing report can be exported to PDF or Excel using the Export button in the top right of the report page. Scheduled exports can be configured under Settings > Scheduled Reports.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Exporting billing data</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">PDF/Excel</span>
                                                <span class="badge bg-light text-dark">Scheduled</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="alert alert-light border d-flex flex-wrap align-items-center justify-content-between">
                                        <div class="me-3">
                                            <strong>Pro tip:</strong> Use a single billing review day each week to keep WIP tight.
                                        </div>
                                        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                data-title="Weekly billing review"
                                                data-content="Run WIP and unbilled time reports weekly. Confirm billing rates, apply write-offs where needed, and finalize invoices before month-end to improve cash flow.">
                                            View checklist
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="documents">
                            <div class="row align-items-center mb-4">
                                <div class="col-lg-8">
                                    <h4 class="mb-2">Documents & Templates</h4>
                                    <p class="text-muted mb-0">Standardize, store, and share documents securely.</p>
                                </div>
                                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                    <span class="badge bg-light text-dark me-2">Templates</span>
                                    <span class="badge bg-light text-dark me-2">Storage</span>
                                    <span class="badge bg-light text-dark">Sharing</span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-primary-soft">
                                                <i class="fas fa-file-code text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Templates</h5>
                                            <p class="text-muted small mb-3">Standardise your documents</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Using built-in legal templates"
                                                     data-content="Go to Documents > Templates. Browse by category such as Contracts, Pleadings, or Letters. Click 'Use Template' to generate a pre-filled document linked to a matter.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Using built-in legal templates</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Creating a custom template"
                                                     data-content="Under Documents > Templates, click 'New Template'. Upload a DOCX file or use the built-in editor. Insert variable tags like @{{client_name}} and @{{matter_number}} for auto-fill.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Creating a custom template</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Variable fields and auto-fill"
                                                     data-content="Templates support dynamic fields that pull data from the linked matter and client profile. Supported variables include client name, address, case number, attorney name, and today's date.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Variable fields &amp; auto-fill</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Auto Fill</span>
                                                <span class="badge bg-light text-dark">Reusable</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-success-soft">
                                                <i class="fas fa-cloud-upload-alt text-success"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Uploads &amp; Storage</h5>
                                            <p class="text-muted small mb-3">Manage case documents</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Uploading documents to a case"
                                                     data-content="Open the matter and click the Documents tab. Drag and drop files or click Upload. Supported formats include PDF, DOCX, XLSX, JPG, and PNG up to 50MB per file.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Uploading documents to a case</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Organising documents into folders"
                                                     data-content="Click 'New Folder' within the matter's document tab. Drag and drop files into folders. Folders can be renamed or colour-coded for quick visual reference.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Organising documents into folders</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Storage limits and file types"
                                                     data-content="Your plan includes 20GB of document storage shared across all matters. View usage under Settings > Storage. Contact support to request a storage upgrade.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Storage limits &amp; file types</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">50MB/file</span>
                                                <span class="badge bg-light text-dark">Folders</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-warning-soft">
                                                <i class="fas fa-signature text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">E-Signatures</h5>
                                            <p class="text-muted small mb-3">Sign and request signatures</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Sending a document for e-signature"
                                                     data-content="Open a document and click 'Request Signature'. Add the signatories by email, place signature fields on the document, and send. Signatories receive an email with a secure signing link.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Sending a document for e-signature</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Signing a document yourself"
                                                     data-content="When a document is assigned to you for signing, you will receive an email notification. Click the link, review the document, draw or type your signature, and confirm.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Signing a document yourself</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Tracking signature status"
                                                     data-content="Open the document and check the Signatures panel on the right side. Each signatory is listed with their status: Pending, Viewed, or Signed, along with the timestamp.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Tracking signature status</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Audit Trail</span>
                                                <span class="badge bg-light text-dark">Secure</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-danger-soft">
                                                <i class="fas fa-share-square text-danger"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Sharing &amp; Access</h5>
                                            <p class="text-muted small mb-3">Control who sees what</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Sharing documents with clients"
                                                     data-content="Click Share on any document. Enter the client's email address. They receive a secure link to view or download the document without needing a system account.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Sharing documents with clients</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Setting document permissions"
                                                     data-content="Under a document's settings, choose between View Only, Comment, and Edit permissions. Permissions can be set per user or per role across the firm.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Setting document permissions</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Revoking access to a document"
                                                     data-content="Open the document's Share settings and remove the user or client from the access list. Any active share links for that user will be invalidated immediately.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Revoking access to a document</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Permissions</span>
                                                <span class="badge bg-light text-dark">Links</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="alert alert-light border d-flex flex-wrap align-items-center justify-content-between">
                                        <div class="me-3">
                                            <strong>Pro tip:</strong> Store signed files in a single "Final" folder per matter.
                                        </div>
                                        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                data-title="Document hygiene checklist"
                                                data-content="Create a Final folder per matter. Move signed PDFs there, lock editing, and name files with date + version (e.g. 2026-04-07 NDA v2).">
                                            View checklist
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="tab-pane fade" id="reports">
                            <div class="row align-items-center mb-4">
                                <div class="col-lg-8">
                                    <h4 class="mb-2">Reports & Analytics</h4>
                                    <p class="text-muted mb-0">Measure performance, workloads, and financial health.</p>
                                </div>
                                <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                    <span class="badge bg-light text-dark me-2">Analytics</span>
                                    <span class="badge bg-light text-dark me-2">Finance</span>
                                    <span class="badge bg-light text-dark">Exports</span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-primary-soft">
                                                <i class="fas fa-chart-line text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Practice Analytics</h5>
                                            <p class="text-muted small mb-3">Firm-wide performance insights</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Viewing caseload by attorney"
                                                     data-content="Go to Reports > Caseload. Filter by attorney, date range, and case type. The chart shows active, pending, and closed matters assigned to each team member.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Viewing caseload by attorney</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Matter status overview"
                                                     data-content="Reports > Matter Overview gives a breakdown of all cases by status. Use the pie chart view to identify bottlenecks or a high volume of cases stuck in a particular stage.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Matter status overview</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Win/loss rate tracking"
                                                     data-content="Enable outcome tracking in Settings > Case Outcomes. Once enabled, attorneys can log results on case closure. Reports > Outcomes will display win, loss, and settlement rates by matter type and attorney.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Win/loss rate tracking</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">KPIs</span>
                                                <span class="badge bg-light text-dark">Benchmarks</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-success-soft">
                                                <i class="fas fa-coins text-success"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Financial Reports</h5>
                                            <p class="text-muted small mb-3">Revenue, expenses &amp; collections</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Monthly revenue report"
                                                     data-content="Reports > Revenue shows total billed and collected amounts month by month. Drill into any month to see the underlying invoices and matters that contributed to that figure.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Monthly revenue report</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Accounts receivable ageing"
                                                     data-content="The AR Ageing report under Billing > Reports groups outstanding invoices by how long they have been overdue. Use this to prioritise collections and send targeted reminders.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Accounts receivable ageing</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Attorney productivity report"
                                                     data-content="Reports > Productivity shows billable hours logged, invoiced, and collected per attorney over a selected period. This is useful for performance reviews and capacity planning.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Attorney productivity report</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Collections</span>
                                                <span class="badge bg-light text-dark">Forecast</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-warning-soft">
                                                <i class="fas fa-tasks text-warning"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Activity Reports</h5>
                                            <p class="text-muted small mb-3">Track time and actions</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Daily activity log"
                                                     data-content="Reports > Activity Log shows every action taken in the system within a date range. Filter by user or matter to audit specific activity. Useful for compliance and supervision.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Daily activity log</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Billable vs non-billable hours"
                                                     data-content="The Time Analysis report under Reports > Time breaks down hours logged into billable and non-billable categories per attorney, matter type, and month.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Billable vs non-billable hours</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Task completion rates"
                                                     data-content="Reports > Tasks shows completed, pending, and overdue tasks across the firm. Filter by assignee or matter to identify workload imbalances or missed deadlines.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Task completion rates</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">Audits</span>
                                                <span class="badge bg-light text-dark">Oversight</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-6 mb-4">
                                    <div class="help-topic-card h-100">
                                        <div class="card-icon-header">
                                            <div class="icon-circle bg-danger-soft">
                                                <i class="fas fa-file-export text-danger"></i>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title mb-2">Exports &amp; Scheduling</h5>
                                            <p class="text-muted small mb-3">Share and automate reports</p>
                                            <div class="article-list">
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Exporting reports to PDF or Excel"
                                                     data-content="Every report page has an Export button in the top-right corner. Choose PDF for presentations or XLSX for further data analysis. Large exports are emailed to you automatically when ready.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Exporting reports to PDF or Excel</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Scheduling automated reports"
                                                     data-content="Under Settings > Scheduled Reports, configure any report to run daily, weekly, or monthly. Select the recipients and format. The system will email the report automatically on the set schedule.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Scheduling automated reports</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                                <div class="article-item" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                     data-title="Custom report filters and date ranges"
                                                     data-content="All reports support custom date ranges, attorney filters, matter type filters, and status filters. Saved filter presets can be created so you do not need to re-configure them each time.">
                                                    <i class="fas fa-file-alt text-muted me-2"></i>
                                                    <span>Custom report filters &amp; date ranges</span>
                                                    <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <span class="badge bg-light text-dark me-2">PDF/XLSX</span>
                                                <span class="badge bg-light text-dark">Automations</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="alert alert-light border d-flex flex-wrap align-items-center justify-content-between">
                                        <div class="me-3">
                                            <strong>Pro tip:</strong> Save report filters for your monthly board pack.
                                        </div>
                                        <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#articleModal"
                                                data-title="Board pack checklist"
                                                data-content="Create saved filters for revenue, AR ageing, caseload, and productivity. Export monthly as PDF and store in a shared Management folder.">
                                            View checklist
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- FAQ Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between mb-4">
                        <h4 class="mb-0">
                            <i class="fas fa-comments text-info me-2"></i>
                            Frequently Asked Questions
                        </h4>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-secondary active" data-faq-filter="all">All</button>
                            <button type="button" class="btn btn-outline-secondary" data-faq-filter="general">General</button>
                            <button type="button" class="btn btn-outline-secondary" data-faq-filter="billing">Billing</button>
                            <button type="button" class="btn btn-outline-secondary" data-faq-filter="technical">Technical</button>
                        </div>
                    </div>
                    
                    <div class="accordion accordion-flush" id="faqAccordion">
                        @foreach($faqs as $index => $faq)
                        <div class="accordion-item faq-item" data-faq-category="{{ $faq['category'] ?? 'general' }}">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-{{ $index }}">
                                    <span class="faq-question">{{ $faq['question'] }}</span>
                                    <span class="badge bg-light text-dark ms-2">{{ ucfirst($faq['category'] ?? 'general') }}</span>
                                </button>
                            </h2>
                            <div id="faq-{{ $index }}" class="accordion-collapse collapse">
                                <div class="accordion-body">
                                    <p class="mb-3">{{ $faq['answer'] }}</p>
                                    <div class="faq-footer">
                                        <span class="text-muted small me-3">Was this helpful?</span>
                                        <button class="btn btn-sm btn-outline-success me-2" onclick="rateFaq({{ $index }}, 'yes')">
                                            <i class="fas fa-thumbs-up"></i> Yes
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="rateFaq({{ $index }}, 'no')">
                                            <i class="fas fa-thumbs-down"></i> No
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Support Options -->
    <div class="row mt-5 mb-4 justify-content-center">
        <div class="col-lg-4 mb-3 mx-auto">
            <div class="support-card">
                <div class="support-icon bg-info-soft">
                    <i class="fas fa-phone text-info"></i>
                </div>
                <h5 class="mt-3">Phone Support</h5>
                <p class="text-muted small">Call us: +263 71 496 6574</p>
                <a class="btn btn-outline-info btn-sm mt-2" href="tel:+263714966574">
                    Call Now
                </a>
                <button class="btn btn-outline-primary btn-sm mt-2 ms-2" data-bs-toggle="modal" data-bs-target="#contactModal">
                    Contact Form
                </button>
            </div>
        </div>
    </div>

</div>

<!-- Article Modal -->
<div class="modal fade" id="articleModal" tabindex="-1" aria-labelledby="articleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="articleModalLabel">Article Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="articleContent"></div>
                <hr class="my-4">
                <div class="article-feedback">
                    <h6>Was this article helpful?</h6>
                    <div class="btn-group mt-2" role="group">
                        <button type="button" class="btn btn-outline-success">
                            <i class="fas fa-thumbs-up me-2"></i>Yes
                        </button>
                        <button type="button" class="btn btn-outline-danger">
                            <i class="fas fa-thumbs-down me-2"></i>No
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 bg-light">
                <button type="button" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-print me-2"></i>Print
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-share-alt me-2"></i>Share
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content contact-modal">
            <div class="modal-header border-0 contact-header">
                <div class="d-flex align-items-center gap-3">
                    <div class="contact-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div>
                        <h5 class="modal-title mb-1" id="contactModalLabel">Contact Support</h5>
                        <small class="text-white-50">We respond within 1 business day</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="contactForm" class="contact-form">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="contactName" class="form-label">Full Name</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                            <input type="text" class="form-control" id="contactName" name="name" value="{{ old('name', optional(Auth::user())->name) }}" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label for="contactSubject" class="form-label">Subject</label>
                            <select class="form-select" id="contactSubject" name="subject" required>
                                <option value="">Select a topic...</option>
                                <option value="Case Management">Case Management</option>
                                <option value="Billing Issue">Billing Issue</option>
                                <option value="Technical Problem">Technical Problem</option>
                                <option value="Account Question">Account Question</option>
                                <option value="Other">Other</option>
                            </select>
                            <div class="contact-topic-help" id="contactSubjectHelp">
                                <p class="mb-2 text-muted">Pick a topic to see what details help us solve it faster.</p>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label for="contactMessage" class="form-label">Message</label>
                            <textarea class="form-control" id="contactMessage" name="message" rows="5" required></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="contactSubmitBtn" onclick="submitContactForm()">
                    <i class="fas fa-paper-plane me-2"></i>Send Message
                </button>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-soft: #e7f1ff;
    --success-soft: #d4edda;
    --danger-soft: #f8d7da;
    --warning-soft: #fff3cd;
    --info-soft: #d1ecf1;
}

/* Contact Modal */
.contact-modal {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2);
}

.contact-header {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.contact-form .form-label {
    font-weight: 600;
    color: #1f2937;
}

.contact-form .input-group-text {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.contact-form .form-control,
.contact-form .form-select {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.contact-topic-help {
    background: #f8fafc;
    border: 1px dashed #cbd5f1;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    margin-top: 0.5rem;
}

.contact-topic-help ul {
    margin: 0;
    padding-left: 1.1rem;
}

.contact-topic-help li {
    margin: 0.2rem 0;
    color: #475569;
    font-size: 0.9rem;
}

/* Hero Section */
.help-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 2rem;
    border-radius: 1rem;
    color: white;
    margin-bottom: 2rem;
}

.help-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Enhanced Search */
.search-wrapper {
    position: relative;
}

.search-input {
    padding-left: 3rem;
    padding-right: 1rem;
    border-radius: 50px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    font-size: 1rem;
}

.search-input:focus {
    box-shadow: 0 4px 30px rgba(0,0,0,0.15);
    outline: none;
}

.search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    z-index: 10;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 1rem;
    margin-top: 0.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.search-results-dropdown.show {
    display: block;
}

.search-result-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: #f8f9fa;
}

.search-result-item:last-child {
    border-bottom: none;
}

/* Quick Links */
.quick-links {
    text-align: center;
}

.quick-links .badge {
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

.quick-links .badge:hover {
    background: #6c757d !important;
    color: white !important;
    transform: translateY(-2px);
}

/* Quick Access Cards */
.quick-access-card {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
}

.quick-access-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.bg-primary-soft { background: var(--primary-soft); }
.bg-success-soft { background: var(--success-soft); }
.bg-danger-soft { background: var(--danger-soft); }
.bg-warning-soft { background: var(--warning-soft); }
.bg-info-soft { background: var(--info-soft); }

/* Help Tabs */
.help-tabs {
    border-bottom: 2px solid #e9ecef;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.help-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 1rem 1.5rem;
    white-space: nowrap;
    transition: all 0.3s;
}

.help-tabs .nav-link:hover {
    background: transparent;
    color: #667eea;
}

.help-tabs .nav-link.active {
    color: #667eea;
    background: transparent;
    border-bottom-color: #667eea;
}

/* Help Topic Cards */
.help-topic-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.help-topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: #667eea;
}

.card-icon-header {
    padding: 2rem 1.5rem 1rem;
    text-align: center;
}

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.article-list {
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

.article-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
}

.article-item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

.article-item i.fa-chevron-right {
    font-size: 0.75rem;
}

/* FAQ Items */
.faq-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
}

.faq-item:last-child {
    border-bottom: none;
}

.accordion-button {
    padding: 1.25rem 1.5rem;
    font-weight: 500;
    background: transparent;
}

.accordion-button:not(.collapsed) {
    background: #f8f9fa;
    color: #667eea;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667eea'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-question {
    flex-grow: 1;
}

.faq-footer {
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* Support Cards */
.support-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    border: 2px solid #e9ecef;
    transition: all 0.3s;
    height: 100%;
}

.support-card:hover {
    border-color: #667eea;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.support-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* System Status */
.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-operational {
    background: #28a745;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .help-hero {
        padding: 2rem 1rem;
    }
    
    .help-hero h1 {
        font-size: 1.75rem;
    }
    
    .help-tabs {
        font-size: 0.875rem;
    }
    
    .help-tabs .nav-link {
        padding: 0.75rem 1rem;
    }
}


/* Animations */
@keyframes fadeIn {
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}


    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.help-topic-wrapper {
    animation: fadeIn 0.5s ease-out;
}

.help-topic-wrapper:nth-child(1) { animation-delay: 0.1s; }
.help-topic-wrapper:nth-child(2) { animation-delay: 0.2s; }
.help-topic-wrapper:nth-child(3) { animation-delay: 0.3s; }
</style>

<script>
// Enhanced Search with Live Results
let searchTimeout;
document.getElementById('helpSearch').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase().trim();
    const resultsDropdown = document.getElementById('searchResults');
    
    clearTimeout(searchTimeout);
    
    if (searchTerm.length < 2) {
        resultsDropdown.classList.remove('show');
        filterTopics('');
        return;
    }
    
    searchTimeout = setTimeout(() => {
        // Filter visible topics
        filterTopics(searchTerm);
        
        // Show search results dropdown
        showSearchResults(searchTerm);
    }, 300);
});

function filterTopics(searchTerm) {
    const cards = document.querySelectorAll('.help-topic-wrapper');
    let visibleCount = 0;
    
    cards.forEach(card => {
        const title = card.querySelector('.card-title')?.textContent.toLowerCase() || '';
        const description = card.querySelector('.text-muted')?.textContent.toLowerCase() || '';
        const articles = card.querySelectorAll('.article-item span');
        
        let hasMatch = title.includes(searchTerm) || description.includes(searchTerm);
        
        if (!hasMatch) {
            articles.forEach(article => {
                if (article.textContent.toLowerCase().includes(searchTerm)) {
                    hasMatch = true;
                }
            });
        }
        
        if (hasMatch || searchTerm === '') {
            card.style.display = 'block';
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });
    
    // Show no results message if needed
    const container = document.getElementById('helpTopicsContainer');
    let noResults = container.querySelector('.no-results');
    
    if (visibleCount === 0 && searchTerm !== '') {
        if (!noResults) {
            noResults = document.createElement('div');
            noResults.className = 'col-12 no-results text-center py-5';
            noResults.innerHTML = `
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h5>No results found</h5>
                <p class="text-muted">Try adjusting your search terms or browse categories above</p>
            `;
            container.appendChild(noResults);
        }
    } else if (noResults) {
        noResults.remove();
    }
}

function showSearchResults(searchTerm) {
    const resultsDropdown = document.getElementById('searchResults');
    
    // Collect matching articles
    const matches = [];
    const cards = document.querySelectorAll('.help-topic-wrapper');
    
    cards.forEach(card => {
        const topicTitle = card.querySelector('.card-title')?.textContent || '';
        const articles = card.querySelectorAll('.article-item');
        
        articles.forEach(article => {
            const articleTitle = article.querySelector('span')?.textContent || '';
            if (articleTitle.toLowerCase().includes(searchTerm)) {
                matches.push({
                    topic: topicTitle,
                    title: articleTitle,
                    element: article
                });
            }
        });
    });
    
    if (matches.length > 0) {
        let html = '';
        matches.slice(0, 5).forEach(match => {
            html += `
                <div class="search-result-item" onclick="this.querySelector('[data-bs-toggle]').click()">
                    <div class="d-flex align-items-start">
                        <i class="fas fa-file-alt text-muted me-3 mt-1"></i>
                        <div class="flex-grow-1">
                            <strong>${match.title}</strong>
                            <div class="small text-muted">${match.topic}</div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        if (matches.length > 5) {
            html += `
                <div class="text-center py-2 border-top">
                    <small class="text-muted">${matches.length - 5} more results...</small>
                </div>
            `;
        }
        
        resultsDropdown.innerHTML = html;
        resultsDropdown.classList.add('show');
    } else {
        resultsDropdown.classList.remove('show');
    }
}

// Close search results when clicking outside
document.addEventListener('click', function(e) {
    const searchWrapper = document.querySelector('.search-wrapper');
    const resultsDropdown = document.getElementById('searchResults');
    
    if (!searchWrapper.contains(e.target)) {
        resultsDropdown.classList.remove('show');
    }
});

// Quick link badges
document.querySelectorAll('.quick-links .badge').forEach(badge => {
    badge.addEventListener('click', function(e) {
        e.preventDefault();
        const searchTerm = this.getAttribute('data-search');
        document.getElementById('helpSearch').value = searchTerm;
        filterTopics(searchTerm.toLowerCase());
    });
});

// Quick access cards
document.querySelectorAll('.quick-access-card').forEach(card => {
    card.addEventListener('click', function() {
        const category = this.getAttribute('data-category');
        // Scroll to topics section
        document.querySelector('.help-tabs').scrollIntoView({ behavior: 'smooth' });
    });
});

// Article Modal
const articleModal = document.getElementById('articleModal');
if (articleModal) {
    articleModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const title = button.getAttribute('data-title');
        const content = button.getAttribute('data-content');
        
        const modalTitle = articleModal.querySelector('.modal-title');
        const modalBody = articleModal.querySelector('#articleContent');
        
        modalTitle.textContent = title;
        modalBody.innerHTML = `<p>${content}</p>`;
    });
}

// FAQ Filtering
document.querySelectorAll('[data-faq-filter]').forEach(button => {
    button.addEventListener('click', function() {
        const filter = this.getAttribute('data-faq-filter');
        
        // Update active button
        document.querySelectorAll('[data-faq-filter]').forEach(btn => {
            btn.classList.remove('active');
        });
        this.classList.add('active');
        
        // Filter FAQ items
        const faqItems = document.querySelectorAll('.faq-item');
        faqItems.forEach(item => {
            const category = item.getAttribute('data-faq-category');
            if (filter === 'all' || category === filter) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    });
});

// FAQ Rating
function rateFaq(index, rating) {
    // Show thank you message
    const faqItem = document.querySelector(`#faq-${index}`);
    const footer = faqItem.querySelector('.faq-footer');
    
    footer.innerHTML = `
        <div class="alert alert-success mb-0" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            Thank you for your feedback!
        </div>
    `;
    
    // Here you would typically send the rating to your backend
    console.log(`FAQ ${index} rated: ${rating}`);
}

// Contact Form Submission
function submitContactForm() {
    const form = document.getElementById('contactForm');
    
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }

    // Show loading state
    const submitBtn = document.getElementById('contactSubmitBtn');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Opening email...';
    submitBtn.disabled = true;

    const name = document.getElementById('contactName').value.trim();
    const subject = document.getElementById('contactSubject').value.trim();
    const message = document.getElementById('contactMessage').value.trim();

    const bodyLines = [
        `Name: ${name}`,
        '',
        message
    ];

    const mailto = [
        'mailto:melsoftprolex@gmail.com',
        '?cc=' + encodeURIComponent('tadiwagwena@melsoftzim.co.zw'),
        '&subject=' + encodeURIComponent(subject || 'Support Request'),
        '&body=' + encodeURIComponent(bodyLines.join('\n'))
    ].join('');

    window.location.href = mailto;

    // Close modal and reset
    const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
    modal.hide();
    form.reset();
    submitBtn.innerHTML = originalText;
    submitBtn.disabled = false;
}

// Contact subject helper
document.addEventListener('DOMContentLoaded', function() {
    const subjectSelect = document.getElementById('contactSubject');
    const helpBox = document.getElementById('contactSubjectHelp');
    if (!subjectSelect || !helpBox) return;

    const topicHelp = {
        'Case Management': [
            'Case number or matter reference',
            'Current status (draft, filed, hearing, closed)',
            'Key dates or deadlines involved',
            'What action you want to complete'
        ],
        'Billing Issue': [
            'Invoice or receipt number',
            'Amount and currency in question',
            'Payment method used (bank, card, cash)',
            'Screenshot or exact error message'
        ],
        'Technical Problem': [
            'Exact steps that led to the issue',
            'Browser and device used',
            'Error message or code (if any)',
            'Time the issue happened'
        ],
        'Account Question': [
            'User name or account email',
            'Role or permissions affected',
            'Action you are trying to perform',
            'Any recent changes made'
        ],
        'Other': [
            'Short summary of the request',
            'Where in the system it occurs',
            'Expected result vs actual result',
            'Best time to reach you'
        ]
    };

    function renderHelp() {
        const key = subjectSelect.value;
        const items = topicHelp[key];
        if (!items) {
            helpBox.innerHTML = '<p class="mb-2 text-muted">Pick a topic to see what details help us solve it faster.</p>';
            return;
        }
        helpBox.innerHTML = `
            <p class="mb-2 fw-semibold text-secondary">Include these details:</p>
            <ul>
                ${items.map(i => `<li>${i}</li>`).join('')}
            </ul>
        `;
    }

    subjectSelect.addEventListener('change', renderHelp);
    renderHelp();
});



// Print article
document.querySelectorAll('.modal-footer button:has(.fa-print)').forEach(btn => {
    btn.addEventListener('click', function() {
        const modalContent = document.querySelector('#articleContent').innerHTML;
        const modalTitle = document.querySelector('#articleModalLabel').textContent;
        
        const printWindow = window.open('', '', 'height=600,width=800');
        printWindow.document.write('<html><head><title>' + modalTitle + '</title>');
        printWindow.document.write('<style>body{font-family:Arial,sans-serif;padding:20px;}</style>');
        printWindow.document.write('</head><body>');
        printWindow.document.write('<h1>' + modalTitle + '</h1>');
        printWindow.document.write(modalContent);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
    });
});

// Share article
document.querySelectorAll('.modal-footer button:has(.fa-share-alt)').forEach(btn => {
    btn.addEventListener('click', function() {
        const modalTitle = document.querySelector('#articleModalLabel').textContent;
        const url = window.location.href;
        
        if (navigator.share) {
            navigator.share({
                title: modalTitle,
                text: 'Check out this help article',
                url: url
            }).catch(err => console.log('Error sharing:', err));
        } else {
            // Fallback: Copy to clipboard
            navigator.clipboard.writeText(url).then(() => {
                alert('Link copied to clipboard!');
            });
        }
    });
});

// Article feedback
document.querySelectorAll('.article-feedback button').forEach(btn => {
    btn.addEventListener('click', function() {
        const feedback = this.textContent.includes('Yes') ? 'positive' : 'negative';
        const parent = this.closest('.article-feedback');
        
        parent.innerHTML = `
            <div class="alert alert-success mb-0" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                Thank you for your feedback!
            </div>
        `;
        
        console.log('Article feedback:', feedback);
    });
});

// Smooth scroll for internal links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
});

// Initialize tooltips if Bootstrap tooltips are available
if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
}

// Keyboard navigation for search
document.getElementById('helpSearch').addEventListener('keydown', function(e) {
    const resultsDropdown = document.getElementById('searchResults');
    
    if (e.key === 'Escape') {
        resultsDropdown.classList.remove('show');
        this.blur();
    }
});

// Auto-focus search on keyboard shortcut (Ctrl/Cmd + K)
document.addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        document.getElementById('helpSearch').focus();
    }
});

console.log('Help Center initialized successfully');
</script>
@endsection