{{ define "content" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.Title}}</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body class="bg-gray-50">
    <!-- Full Width Container -->
    <div class="min-h-screen w-full flex flex-col">
        <!-- Main Reports Content -->
        <div class="w-full">
            <!-- Full Width Container -->
            <div class="min-h-screen w-full flex flex-col">
                <!-- Top Navigation Bar -->
                <div class="bg-white border-b border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 bg-blue-600 flex items-center justify-center">
                                    <i class="fas fa-chart-line text-white text-sm"></i>
                                </div>
                                <span class="text-xl font-semibold text-gray-900">
                                    Reports & Analytics
                                </span>
                            </div>
                            <div class="flex items-center gap-4">
                                {{if .SearchType}}
                                <button onclick="exportData()" class="px-6 py-2.5 bg-green-600 text-white text-sm font-medium hover:bg-green-700 transition-colors">
                                    <i class="fas fa-download mr-2"></i>Export CSV
                                </button>
                                {{end}}
                                <button onclick="toggleAdvancedSearch()" class="px-6 py-2.5 bg-purple-600 text-white text-sm font-medium hover:bg-purple-700 transition-colors">
                                    <i class="fas fa-search-plus mr-2"></i>Advanced Search
                                </button>
                                <button onclick="printReport()" class="px-6 py-2.5 border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-print mr-2"></i>Print Report
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stats Grid - Full Width -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 bg-white border-b border-gray-200">
                    <!-- Total Users -->
                    <div class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer" onclick="applyQuickFilter('users', {})">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-blue-50 flex items-center justify-center">
                                <i class="fas fa-users text-blue-600 text-lg"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 mb-1">Total Users</p>
                                <p class="text-2xl font-bold text-gray-900">{{.ReportData.TotalUsers}}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Total Polls -->
                    <div class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer" onclick="applyQuickFilter('polls', {})">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-blue-50 flex items-center justify-center">
                                <i class="fas fa-poll text-blue-600 text-lg"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 mb-1">Total Polls</p>
                                <p class="text-2xl font-bold text-gray-900">{{.ReportData.TotalPolls}}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Total Addresses -->
                    <div class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer" onclick="applyQuickFilter('addresses', {})">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-blue-50 flex items-center justify-center">
                                <i class="fas fa-map-marker-alt text-blue-600 text-lg"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 mb-1">Total Addresses</p>
                                <p class="text-2xl font-bold text-gray-900">{{.ReportData.TotalAddresses}}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Total Appointments -->
                    <div class="p-8 hover:bg-gray-50 transition-colors cursor-pointer" onclick="applyQuickFilter('appointments', {})">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-blue-50 flex items-center justify-center">
                                <i class="fas fa-calendar text-blue-600 text-lg"></i>
                            </div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-600 mb-1">Appointments</p>
                                <p class="text-2xl font-bold text-gray-900">{{len .ReportData.Appointments}}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Search and Filter Section - Full Width -->
                <div class="bg-white w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Search & Filter Data</h3>
                        
                        <form method="GET" action="/reports" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <!-- Search Type -->
                                <div>
                                    <label for="search_type" class="block text-sm font-medium text-gray-700 mb-2">Search In</label>
                                    <select name="search_type" id="search_type" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="" {{if eq .SearchType ""}}selected{{end}}>All Data</option>
                                        <option value="users" {{if eq .SearchType "users"}}selected{{end}}>Users</option>
                                        <option value="polls" {{if eq .SearchType "polls"}}selected{{end}}>Polls</option>
                                        <option value="appointments" {{if eq .SearchType "appointments"}}selected{{end}}>Appointments</option>
                                        <option value="addresses" {{if eq .SearchType "addresses"}}selected{{end}}>Addresses</option>
                                        <option value="teams" {{if eq .SearchType "teams"}}selected{{end}}>Teams</option>
                                    </select>
                                </div>

                                <!-- Search Query -->
                                <div>
                                    <label for="search_query" class="block text-sm font-medium text-gray-700 mb-2">Search Term</label>
                                    <input type="text" name="search_query" id="search_query" value="{{.SearchQuery}}" 
                                           placeholder="Enter search term..." 
                                           class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>

                                <!-- Role Filter -->
                                <div>
                                    <label for="role_filter" class="block text-sm font-medium text-gray-700 mb-2">Role Filter</label>
                                    <select name="role_filter" id="role_filter" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">All Roles</option>
                                        <option value="1" {{if eq .RoleFilter "1"}}selected{{end}}>Admin</option>
                                        <option value="2" {{if eq .RoleFilter "2"}}selected{{end}}>Volunteer</option>
                                    </select>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                                <!-- Date Range -->
                                <div>
                                    <label for="date_from" class="block text-sm font-medium text-gray-700 mb-2">Date From</label>
                                    <input type="date" name="date_from" id="date_from" value="{{.DateFrom}}" 
                                           class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>

                                <div>
                                    <label for="date_to" class="block text-sm font-medium text-gray-700 mb-2">Date To</label>
                                    <input type="date" name="date_to" id="date_to" value="{{.DateTo}}" 
                                           class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                </div>

                                <!-- Status Filter -->
                                <div>
                                    <label for="status_filter" class="block text-sm font-medium text-gray-700 mb-2">Status Filter</label>
                                    <select name="status_filter" id="status_filter" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">All Status</option>
                                        <option value="active" {{if eq .StatusFilter "active"}}selected{{end}}>Active</option>
                                        <option value="inactive" {{if eq .StatusFilter "inactive"}}selected{{end}}>Inactive</option>
                                    </select>
                                </div>

                                <!-- Sort Options -->
                                <div>
                                    <label for="sort_by" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                                    <select name="sort_by" id="sort_by" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="created_at" {{if eq .SortBy "created_at"}}selected{{end}}>Created Date</option>
                                        <option value="updated_at" {{if eq .SortBy "updated_at"}}selected{{end}}>Updated Date</option>
                                        <option value="first_name" {{if eq .SortBy "first_name"}}selected{{end}}>First Name</option>
                                        <option value="last_name" {{if eq .SortBy "last_name"}}selected{{end}}>Last Name</option>
                                        <option value="email" {{if eq .SortBy "email"}}selected{{end}}>Email</option>
                                        <option value="poll_title" {{if eq .SortBy "poll_title"}}selected{{end}}>Poll Title</option>
                                        <option value="amount_donated" {{if eq .SortBy "amount_donated"}}selected{{end}}>Amount Donated</option>
                                    </select>
                                </div>
                            </div>

                            <div class="flex gap-4">
                                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">
                                    <i class="fas fa-search mr-2"></i>Search
                                </button>
                                
                                <a href="/reports" class="px-6 py-2.5 bg-gray-600 text-white text-sm font-medium hover:bg-gray-700 transition-colors">
                                    <i class="fas fa-times mr-2"></i>Clear Filters
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Results Section - Full Width -->
                {{if eq .SearchType "users"}}
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Users Results ({{.ReportData.TotalUsers}} total)</h3>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">User</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Email</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Phone</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Role</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Admin Code</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Created</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    {{range .ReportData.Users}}
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="py-4">
                                            <div class="text-sm font-medium text-gray-900">{{.FirstName}} {{.LastName}}</div>
                                            <div class="text-sm text-gray-500">ID: {{.UserID}}</div>
                                        </td>
                                        <td class="py-4 text-sm text-gray-900">{{.Email}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.Phone}}</td>
                                        <td class="py-4">
                                            <span class="px-2 py-1 text-xs font-semibold rounded-full {{if eq .RoleID 1}}bg-red-100 text-red-800{{else}}bg-green-100 text-green-800{{end}}">
                                                {{if eq .RoleID 1}}Admin{{else}}Volunteer{{end}}
                                            </span>
                                        </td>
                                        <td class="py-4 text-sm text-gray-900">{{.AdminCode}}</td>
                                        <td class="py-4 text-sm text-gray-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{else if eq .SearchType "polls"}}
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Polls Results ({{.ReportData.TotalPolls}} total)</h3>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Poll</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Author</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Address</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Status</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Donated</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Created</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    {{range .ReportData.Polls}}
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="py-4">
                                            <div class="text-sm font-medium text-gray-900">{{.PollTitle}}</div>
                                            <div class="text-sm text-gray-500">{{.PollDescription}}</div>
                                        </td>
                                        <td class="py-4 text-sm text-gray-900">{{.AuthorName}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.Address}}</td>
                                        <td class="py-4">
                                            <span class="px-2 py-1 text-xs font-semibold rounded-full {{if .IsActive}}bg-green-100 text-green-800{{else}}bg-red-100 text-red-800{{end}}">
                                                {{if .IsActive}}Active{{else}}Inactive{{end}}
                                            </span>
                                        </td>
                                        <td class="py-4 text-sm text-gray-900">${{printf "%.2f" .AmountDonated}}</td>
                                        <td class="py-4 text-sm text-gray-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{else if eq .SearchType "appointments"}}
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Appointments Results ({{len .ReportData.Appointments}} total)</h3>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">User</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Address</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Date</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Time</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Created</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    {{range .ReportData.Appointments}}
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="py-4 text-sm font-medium text-gray-900">{{.UserName}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.Address}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.AppointmentDate.Format "2006-01-02"}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.AppointmentTime.Format "15:04"}}</td>
                                        <td class="py-4 text-sm text-gray-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{else if eq .SearchType "addresses"}}
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Addresses Results ({{.ReportData.TotalAddresses}} total)</h3>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Address</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Street Details</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Coordinates</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Visited</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Created</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    {{range .ReportData.Addresses}}
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="py-4">
                                            <div class="text-sm font-medium text-gray-900">{{.Address}}</div>
                                            <div class="text-sm text-gray-500">{{.HouseNumber}}{{.HouseAlpha}}</div>
                                        </td>
                                        <td class="py-4">
                                            <div class="text-sm text-gray-900">{{.StreetName}} {{.StreetType}}</div>
                                            <div class="text-sm text-gray-500">{{.StreetQuadrant}}</div>
                                        </td>
                                        <td class="py-4 text-sm text-gray-900">{{printf "%.6f" .Latitude}}, {{printf "%.6f" .Longitude}}</td>
                                        <td class="py-4">
                                            <span class="px-2 py-1 text-xs font-semibold rounded-full {{if .VisitedValidated}}bg-green-100 text-green-800{{else}}bg-red-100 text-red-800{{end}}">
                                                {{if .VisitedValidated}}Visited{{else}}Not Visited{{end}}
                                            </span>
                                        </td>
                                        <td class="py-4 text-sm text-gray-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{else if eq .SearchType "teams"}}
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Teams Results ({{len .ReportData.Teams}} total)</h3>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-200">
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Team ID</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Team Lead</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Volunteer</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Created</th>
                                        <th class="text-left py-3 text-sm font-medium text-gray-600">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    {{range .ReportData.Teams}}
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="py-4 text-sm font-medium text-gray-900">{{.TeamID}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.TeamLeadName}}</td>
                                        <td class="py-4 text-sm text-gray-900">{{.VolunteerName}}</td>
                                        <td class="py-4 text-sm text-gray-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
                                        <td class="py-4 text-sm font-medium">
                                            <a href="/teams/{{.TeamID}}" class="text-blue-600 hover:text-blue-800">View Details</a>
                                        </td>
                                    </tr>
                                    {{end}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{else}}
                <!-- Summary Dashboard View -->
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Data Overview</h3>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                            <!-- Recent Users -->
                            <div class="border border-gray-200">
                                <div class="p-6 border-b border-gray-200">
                                    <div class="flex justify-between items-center">
                                        <h4 class="text-base font-medium text-gray-900">Recent Users</h4>
                                        <a href="/reports?search_type=users" class="text-blue-600 hover:text-blue-800 text-sm">View All</a>
                                    </div>
                                </div>
                                <div class="p-6">
                                    {{if .ReportData.Users}}
                                    <div class="space-y-4">
                                        {{range .ReportData.Users}}
                                        <div class="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
                                            <div>
                                                <div class="text-sm font-medium text-gray-900">{{.FirstName}} {{.LastName}}</div>
                                                <div class="text-xs text-gray-500">{{.Email}}</div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-xs text-gray-500">{{.CreatedAt.Format "Jan 02, 2006"}}</div>
                                                <span class="px-2 py-1 text-xs font-semibold rounded-full {{if eq .RoleID 1}}bg-red-100 text-red-800{{else}}bg-green-100 text-green-800{{end}}">
                                                    {{if eq .RoleID 1}}Admin{{else}}Volunteer{{end}}
                                                </span>
                                            </div>
                                        </div>
                                        {{end}}
                                    </div>
                                    {{else}}
                                    <p class="text-gray-500 text-center py-8">No users found</p>
                                    {{end}}
                                </div>
                            </div>

                            <!-- Recent Polls -->
                            <div class="border border-gray-200">
                                <div class="p-6 border-b border-gray-200">
                                    <div class="flex justify-between items-center">
                                        <h4 class="text-base font-medium text-gray-900">Recent Polls</h4>
                                        <a href="/reports?search_type=polls" class="text-blue-600 hover:text-blue-800 text-sm">View All</a>
                                    </div>
                                </div>
                                <div class="p-6">
                                    {{if .ReportData.Polls}}
                                    <div class="space-y-4">
                                        {{range .ReportData.Polls}}
                                        <div class="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
                                            <div>
                                                <div class="text-sm font-medium text-gray-900">{{.PollTitle}}</div>
                                                <div class="text-xs text-gray-500">by {{.AuthorName}}</div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-xs text-gray-500">{{.CreatedAt.Format "Jan 02, 2006"}}</div>
                                                <span class="px-2 py-1 text-xs font-semibold rounded-full {{if .IsActive}}bg-green-100 text-green-800{{else}}bg-red-100 text-red-800{{end}}">
                                                    {{if .IsActive}}Active{{else}}Inactive{{end}}
                                                </span>
                                            </div>
                                        </div>
                                        {{end}}
                                    </div>
                                    {{else}}
                                    <p class="text-gray-500 text-center py-8">No polls found</p>
                                    {{end}}
                                </div>
                            </div>

                            <!-- Recent Appointments -->
                            <div class="border border-gray-200">
                                <div class="p-6 border-b border-gray-200">
                                    <div class="flex justify-between items-center">
                                        <h4 class="text-base font-medium text-gray-900">Recent Appointments</h4>
                                        <a href="/reports?search_type=appointments" class="text-blue-600 hover:text-blue-800 text-sm">View All</a>
                                    </div>
                                </div>
                                <div class="p-6">
                                    {{if .ReportData.Appointments}}
                                    <div class="space-y-4">
                                        {{range .ReportData.Appointments}}
                                        <div class="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
                                            <div>
                                                <div class="text-sm font-medium text-gray-900">{{.UserName}}</div>
                                                <div class="text-xs text-gray-500">{{.Address}}</div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-xs text-gray-900">{{.AppointmentDate.Format "Jan 02, 2006"}}</div>
                                                <div class="text-xs text-gray-500">{{.AppointmentTime.Format "15:04"}}</div>
                                            </div>
                                        </div>
                                        {{end}}
                                    </div>
                                    {{else}}
                                    <p class="text-gray-500 text-center py-8">No appointments found</p>
                                    {{end}}
                                </div>
                            </div>

                            <!-- Address Summary -->
                            <div class="border border-gray-200">
                                <div class="p-6 border-b border-gray-200">
                                    <div class="flex justify-between items-center">
                                        <h4 class="text-base font-medium text-gray-900">Address Summary</h4>
                                        <a href="/reports?search_type=addresses" class="text-blue-600 hover:text-blue-800 text-sm">View All</a>
                                    </div>
                                </div>
                                <div class="p-6">
                                    {{if .ReportData.Addresses}}
                                    <div class="space-y-4">
                                        {{range .ReportData.Addresses}}
                                        <div class="flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
                                            <div>
                                                <div class="text-sm font-medium text-gray-900">{{.Address}}</div>
                                                <div class="text-xs text-gray-500">{{.StreetName}} {{.StreetType}}, {{.StreetQuadrant}}</div>
                                            </div>
                                            <div class="text-right">
                                                <span class="px-2 py-1 text-xs font-semibold rounded-full {{if .VisitedValidated}}bg-green-100 text-green-800{{else}}bg-red-100 text-red-800{{end}}">
                                                    {{if .VisitedValidated}}Visited{{else}}Not Visited{{end}}
                                                </span>
                                            </div>
                                        </div>
                                        {{end}}
                                    </div>
                                    {{else}}
                                    <p class="text-gray-500 text-center py-8">No addresses found</p>
                                    {{end}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Analytics Chart Section - Full Width -->
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-6">Analytics Overview</h3>
                        <div id="analytics_chart" class="w-full h-[400px]"></div>
                    </div>
                </div>
                {{end}}

                <!-- Pagination -->
                {{if and .SearchType (or (gt .ReportData.TotalUsers 0) (gt .ReportData.TotalPolls 0) (gt .ReportData.TotalAddresses 0))}}
                <div class="bg-white border-t border-gray-200 w-full">
                    <div class="px-8 py-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <span class="text-sm text-gray-700">
                                    Page {{.CurrentPage}} | {{.Limit}} per page
                                </span>
                            </div>
                            <div class="flex items-center gap-2">
                                {{if gt .CurrentPage 1}}
                                <a href="?{{.Request.URL.RawQuery}}&page={{sub .CurrentPage 1}}" class="px-3 py-2 border border-gray-300 text-gray-700 text-sm hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                                {{end}}
                                
                                <span class="px-3 py-2 bg-blue-50 text-blue-600 text-sm font-medium border border-blue-200">
                                    {{.CurrentPage}}
                                </span>
                                
                                <a href="?{{.Request.URL.RawQuery}}&page={{add .CurrentPage 1}}" class="px-3 py-2 border border-gray-300 text-gray-700 text-sm hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {{end}}

            </div>
        </div>
    </div>

    <!-- Advanced Search Modal -->
    <div id="advancedSearchModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg bg-white">
            <div class="mt-3">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">Advanced Search</h3>
                    <button onclick="toggleAdvancedSearch()" class="text-gray-400 hover:text-gray-600 text-xl">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form method="POST" action="/reports/advanced-search" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Entity Type</label>
                            <select name="entity" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="users">Users</option>
                                <option value="polls">Polls</option>
                                <option value="appointments">Appointments</option>
                                <option value="addresses">Addresses</option>
                                <option value="teams">Teams</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Text Search</label>
                            <input type="text" name="text_search" placeholder="Search in names, titles, descriptions..." 
                                   class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Date From</label>
                            <input type="date" name="date_from" 
                                   class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Date To</label>
                            <input type="date" name="date_to" 
                                   class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Role Filter</label>
                            <select name="role_filter" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">All Roles</option>
                                <option value="1">Admin</option>
                                <option value="2">Volunteer</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Status Filter</label>
                            <select name="status_filter" class="w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">All Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Min Amount (Polls)</label>
                            <input type="number" name="amount_min" step="0.01" placeholder="0.00" 
                                   class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Max Amount (Polls)</label>
                            <input type="number" name="amount_max" step="0.01" placeholder="1000.00" 
                                   class="w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                    
                    <div class="flex justify-end gap-3 pt-6">
                        <button type="button" onclick="toggleAdvancedSearch()" class="px-6 py-2.5 bg-gray-300 text-gray-800 text-sm font-medium hover:bg-gray-400 transition-colors">
                            Cancel
                        </button>
                        <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors">
                            <i class="fas fa-search mr-2"></i>Search
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Advanced search modal toggle
        function toggleAdvancedSearch() {
            const modal = document.getElementById('advancedSearchModal');
            modal.classList.toggle('hidden');
        }

        // Print report functionality
        function printReport() {
            window.print();
        }

        // Quick filter application
        function applyQuickFilter(type, filter) {
            const url = new URL(window.location);
            url.searchParams.set('search_type', type);
            if (filter) {
                Object.keys(filter).forEach(key => {
                    url.searchParams.set(key, filter[key]);
                });
            }
            window.location.href = url.toString();
        }

        // Export data with current filters
        function exportData() {
            const url = new URL('/reports/export', window.location.origin);
            const currentParams = new URLSearchParams(window.location.search);
            currentParams.forEach((value, key) => {
                url.searchParams.set(key, value);
            });
            window.location.href = url.toString();
        }

        // Auto-submit form when search type changes
        document.addEventListener('DOMContentLoaded', function() {
            const searchTypeSelect = document.getElementById('search_type');
            const searchInput = document.getElementById('search_query');
            
            // Update placeholder based on search type
            searchTypeSelect.addEventListener('change', function() {
                const placeholders = {
                    'users': 'Search by name, email...',
                    'polls': 'Search by title, description...',
                    'appointments': 'Search by user name, address...',
                    'addresses': 'Search by address, street name...',
                    'teams': 'Search by team lead, volunteer name...',
                    '': 'Enter search term...'
                };
                searchInput.placeholder = placeholders[this.value] || 'Enter search term...';
            });

            // Close modal when clicking outside
            document.getElementById('advancedSearchModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    toggleAdvancedSearch();
                }
            });
        });

        // Google Charts for analytics
        google.charts.load("current", { packages: ["corechart", "line"] });
        google.charts.setOnLoadCallback(drawAnalyticsChart);

        function drawAnalyticsChart() {
            var data = new google.visualization.DataTable();
            data.addColumn("string", "Time");
            data.addColumn("number", "Users");
            data.addColumn("number", "Polls");
            data.addColumn("number", "Addresses");

            // Sample data - you can replace this with real data from your backend
            data.addRows([
                ["Jan", {{if .ReportData.TotalUsers}}{{.ReportData.TotalUsers}}{{else}}120{{end}}, {{if .ReportData.TotalPolls}}{{.ReportData.TotalPolls}}{{else}}45{{end}}, {{if .ReportData.TotalAddresses}}{{.ReportData.TotalAddresses}}{{else}}380{{end}}],
                ["Feb", {{if .ReportData.TotalUsers}}{{add .ReportData.TotalUsers 50}}{{else}}180{{end}}, {{if .ReportData.TotalPolls}}{{add .ReportData.TotalPolls 15}}{{else}}62{{end}}, {{if .ReportData.TotalAddresses}}{{add .ReportData.TotalAddresses 120}}{{else}}420{{end}}],
                ["Mar", {{if .ReportData.TotalUsers}}{{add .ReportData.TotalUsers 80}}{{else}}220{{end}}, {{if .ReportData.TotalPolls}}{{add .ReportData.TotalPolls 25}}{{else}}78{{end}}, {{if .ReportData.TotalAddresses}}{{add .ReportData.TotalAddresses 200}}{{else}}510{{end}}],
                ["Apr", {{if .ReportData.TotalUsers}}{{add .ReportData.TotalUsers 120}}{{else}}280{{end}}, {{if .ReportData.TotalPolls}}{{add .ReportData.TotalPolls 35}}{{else}}95{{end}}, {{if .ReportData.TotalAddresses}}{{add .ReportData.TotalAddresses 280}}{{else}}650{{end}}],
                ["May", {{if .ReportData.TotalUsers}}{{add .ReportData.TotalUsers 150}}{{else}}320{{end}}, {{if .ReportData.TotalPolls}}{{add .ReportData.TotalPolls 42}}{{else}}108{{end}}, {{if .ReportData.TotalAddresses}}{{add .ReportData.TotalAddresses 350}}{{else}}720{{end}}],
                ["Jun", {{if .ReportData.TotalUsers}}{{add .ReportData.TotalUsers 200}}{{else}}380{{end}}, {{if .ReportData.TotalPolls}}{{add .ReportData.TotalPolls 58}}{{else}}125{{end}}, {{if .ReportData.TotalAddresses}}{{add .ReportData.TotalAddresses 420}}{{else}}800{{end}}],
            ]);

            var options = {
                title: "System Growth Over Time",
                backgroundColor: "transparent",
                hAxis: { title: "Month" },
                vAxis: { title: "Count" },
                colors: ["#3B82F6", "#10B981", "#F59E0B"],
                chartArea: {
                    left: 60,
                    top: 40,
                    width: "90%",
                    height: "70%",
                },
                legend: { position: "top", alignment: "center" },
                lineWidth: 3,
                pointSize: 5,
            };

            var chart = new google.visualization.LineChart(
                document.getElementById("analytics_chart")
            );
            chart.draw(data, options);
        }

        function updateChart(type) {
            drawAnalyticsChart();
        }

        // Real-time search functionality
        let searchTimeout;
        function handleSearchInput() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                // You can implement real-time search here
                console.log('Performing search...');
            }, 500);
        }

        // Quick stats click handlers
        function focusUsers() {
            applyQuickFilter('users', {});
        }

        function focusPolls() {
            applyQuickFilter('polls', {});
        }

        function focusAddresses() {
            applyQuickFilter('addresses', {});
        }

        function focusAppointments() {
            applyQuickFilter('appointments', {});
        }
    </script>

    <style>
        @media print {
            .no-print {
                display: none !important;
            }
            
            .print-only {
                display: block !important;
            }
            
            body {
                background: white !important;
            }
            
            .border-gray-200 {
                border-color: #000 !important;
            }
        }
        
        /* Enhanced hover effects matching dashboard style */
        .hover-highlight:hover {
            background-color: #f7fafc;
            transform: translateY(-1px);
            transition: all 0.2s ease;
        }

        /* Custom scrollbar for tables */
        .overflow-x-auto::-webkit-scrollbar {
            height: 6px;
        }
        
        .overflow-x-auto::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        
        .overflow-x-auto::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        
        .overflow-x-auto::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
</body>
</html>
{{ end }}