@extends('admin.layout')

@section('title', 'Dashboard')

@section('header', 'Dashboard')

@section('content')
<!-- Quick Actions -->
<div class="mb-6">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Quick Actions</h2>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
        <a href="{{ route('admin.tickets.create') }}" class="group bg-gradient-to-r from-blue-500 to-blue-600 text-white p-3 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
            <div class="flex flex-col items-center text-center">
                <i class="fas fa-plus-circle text-xl mb-1.5 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-medium">New Ticket</span>
            </div>
        </a>
        <a href="{{ route('admin.tasks.create') }}" class="group bg-gradient-to-r from-indigo-500 to-indigo-600 text-white p-3 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
            <div class="flex flex-col items-center text-center">
                <i class="fas fa-tasks text-xl mb-1.5 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-medium">New Task</span>
            </div>
        </a>
        <a href="{{ route('admin.technicians.create') }}" class="group bg-gradient-to-r from-green-500 to-green-600 text-white p-3 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
            <div class="flex flex-col items-center text-center">
                <i class="fas fa-user-plus text-xl mb-1.5 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-medium">Add Technician</span>
            </div>
        </a>
        <a href="{{ route('admin.apartments.create') }}" class="group bg-gradient-to-r from-purple-500 to-purple-600 text-white p-3 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
            <div class="flex flex-col items-center text-center">
                <i class="fas fa-building text-xl mb-1.5 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-medium">Add Apartment</span>
            </div>
        </a>
        <a href="{{ route('admin.reports') }}" class="group bg-gradient-to-r from-orange-500 to-orange-600 text-white p-3 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200">
            <div class="flex flex-col items-center text-center">
                <i class="fas fa-chart-line text-xl mb-1.5 group-hover:scale-110 transition-transform"></i>
                <span class="text-xs font-medium">View Reports</span>
            </div>
        </a>
    </div>
</div>

<!-- Statistics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Total Apartments Card -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600 opacity-0 group-hover:opacity-5 transition-opacity duration-300"></div>
        <div class="relative p-4">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Open Tickets</p>
                    <p class="text-2xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-metric="openTickets">{{ $openTickets }}</p>
                    <div class="mt-1.5 flex items-center text-xs text-gray-500 dark:text-gray-400">
                        <i class="fas fa-arrow-up text-green-500 mr-1"></i>
                        <span>{{ round(($openTickets / $totalTickets) * 100, 1) }}% of total</span>
                    </div>
                </div>
                <div class="p-3 rounded-full bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 text-blue-600 dark:text-blue-300 group-hover:scale-110 transition-transform">
                    <i class="fas fa-building text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Total Tickets Card -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-green-600 opacity-0 group-hover:opacity-5 transition-opacity duration-300"></div>
        <div class="relative p-4">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Completed Tickets</p>
                    <p class="text-2xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors" data-metric="completedTickets">{{ $completedTickets }}</p>
                    <div class="mt-1.5 flex items-center text-xs text-gray-500 dark:text-gray-400">
                        <i class="fas fa-check-circle text-green-500 mr-1"></i>
                        <span>{{ $resolutionRate }}% resolution rate</span>
                    </div>
                </div>
                <div class="p-3 rounded-full bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 text-green-600 dark:text-green-300 group-hover:scale-110 transition-transform">
                    <i class="fas fa-ticket-alt text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Free Technicians Card -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-yellow-600 opacity-0 group-hover:opacity-5 transition-opacity duration-300"></div>
        <div class="relative p-4">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Total Revenue</p>
                    <p class="text-2xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors" data-metric="totalRevenue">₹{{ number_format($totalRevenue, 2) }}</p>
                    <div class="mt-1.5 flex items-center text-xs text-gray-500 dark:text-gray-400">
                        <i class="fas fa-rupee-sign text-green-500 mr-1"></i>
                        <span>{{ $paidPayments }} payments received</span>
                    </div>
                </div>
                <div class="p-3 rounded-full bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 text-yellow-600 dark:text-yellow-300 group-hover:scale-110 transition-transform">
                    <i class="fas fa-tools text-lg"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Assigned Technicians Card -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-red-600 opacity-0 group-hover:opacity-5 transition-opacity duration-300"></div>
        <div class="relative p-4">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Response Time</p>
                    <p class="text-2xl font-bold text-gray-800 dark:text-gray-200 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors" data-metric="avgResponseTime">{{ $avgResponseTime }}h</p>
                    <div class="mt-1.5 flex items-center text-xs text-gray-500 dark:text-gray-400">
                        <i class="fas fa-clock text-red-500 mr-1"></i>
                        <span>Avg response time</span>
                    </div>
                </div>
                <div class="p-3 rounded-full bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900 dark:to-red-800 text-red-600 dark:text-red-300 group-hover:scale-110 transition-transform">
                    <i class="fas fa-user-check text-lg"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Enhanced Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
    <!-- Ticket Status Distribution Pie Chart -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Status Distribution</h3>
            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" onclick="refreshStatusChart()">
                <i class="fas fa-sync-alt text-sm"></i>
            </button>
        </div>
        <div class="relative h-40">
            <canvas id="statusPieChart"></canvas>
        </div>
        <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
            <div class="flex items-center">
                <div class="w-2 h-2 bg-gray-500 rounded-full mr-2"></div>
                <span class="text-gray-600 dark:text-gray-400">Open: <strong class="text-gray-800 dark:text-gray-200">{{ $openTickets }}</strong></span>
            </div>
            <div class="flex items-center">
                <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
                <span class="text-gray-600 dark:text-gray-400">Assigned: <strong class="text-gray-800 dark:text-gray-200">{{ $assignedTickets }}</strong></span>
            </div>
            <div class="flex items-center">
                <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div>
                <span class="text-gray-600 dark:text-gray-400">In Progress: <strong class="text-gray-800 dark:text-gray-200">{{ $inProgressTickets }}</strong></span>
            </div>
            <div class="flex items-center">
                <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                <span class="text-gray-600 dark:text-gray-400">Completed: <strong class="text-gray-800 dark:text-gray-200">{{ $completedTickets }}</strong></span>
            </div>
        </div>
    </div>

    <!-- Technician Workload Bar Chart -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Technician Workload</h3>
            <select class="text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded px-2 py-1" onchange="updateWorkloadChart(this.value)">
                <option value="week">This Week</option>
                <option value="month">This Month</option>
                <option value="year">This Year</option>
            </select>
        </div>
        <div class="relative h-40">
            <canvas id="workloadBarChart"></canvas>
        </div>
        <div class="mt-3 text-center text-xs text-gray-600 dark:text-gray-400">
            <span class="font-medium">Average per technician:</span> 
            <span class="text-blue-600 dark:text-blue-400 font-bold">8.5</span>
        </div>
    </div>

    <!-- Response Time Line Chart -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Response Time Trend</h3>
            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <i class="fas fa-ellipsis-h text-sm"></i>
            </button>
        </div>
        <div class="relative h-40">
            <canvas id="responseTimeChart"></canvas>
        </div>
        <div class="mt-3 text-center text-xs text-gray-600 dark:text-gray-400">
            <span class="font-medium">Current:</span> 
            <span class="text-green-600 dark:text-green-400 font-bold">2.4h</span>
            <span class="text-green-500 text-xs ml-1">↓15%</span>
        </div>
    </div>

    <!-- Apartment Performance -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Top Apartments</h3>
            <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                <i class="fas fa-building text-sm"></i>
            </button>
        </div>
        <div class="space-y-2">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-2">
                        <span class="text-xs font-bold text-blue-600 dark:text-blue-300">1</span>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-800 dark:text-gray-200">Sunshine</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">24 tickets</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xs font-bold text-gray-800 dark:text-gray-200">92%</p>
                    <p class="text-xs text-green-600 dark:text-green-400">resolved</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-2">
                        <span class="text-xs font-bold text-green-600 dark:text-green-300">2</span>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-800 dark:text-gray-200">Garden View</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">18 tickets</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xs font-bold text-gray-800 dark:text-gray-200">89%</p>
                    <p class="text-xs text-green-600 dark:text-green-400">resolved</p>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-6 h-6 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-2">
                        <span class="text-xs font-bold text-purple-600 dark:text-purple-300">3</span>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-800 dark:text-gray-200">Riverside</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">15 tickets</p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-xs font-bold text-gray-800 dark:text-gray-200">87%</p>
                    <p class="text-xs text-green-600 dark:text-green-400">resolved</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Financial Overview Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <!-- Payment Statistics -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Financial Overview</h3>
            <div class="flex items-center space-x-2">
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                    <i class="fas fa-arrow-trend-up mr-1 text-xs"></i>Revenue Growth
                </span>
            </div>
        </div>
        
        <!-- Revenue Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
            <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-3 border border-green-200 dark:border-green-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Total Revenue</span>
                    <i class="fas fa-rupee-sign text-green-600 dark:text-green-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">₹{{ number_format($totalRevenue, 0) }}</p>
                <div class="mt-1 flex items-center text-xs text-green-600 dark:text-green-400">
                    <i class="fas fa-arrow-up mr-1"></i>
                    <span>+12.5%</span>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-3 border border-blue-200 dark:border-blue-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Pending</span>
                    <i class="fas fa-clock text-blue-600 dark:text-blue-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">₹{{ number_format($pendingRevenue, 0) }}</p>
                <div class="mt-1 flex items-center text-xs text-blue-600 dark:text-blue-400">
                    <span>{{ $pendingPayments }} pending</span>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-3 border border-purple-200 dark:border-purple-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Paid</span>
                    <i class="fas fa-check-circle text-purple-600 dark:text-purple-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">{{ $paidPayments }}</p>
                <div class="mt-1 flex items-center text-xs text-purple-600 dark:text-purple-400">
                    <span>{{ round(($paidPayments / $totalPayments) * 100, 1) }}% collected</span>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 rounded-lg p-3 border border-orange-200 dark:border-orange-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Avg Payment</span>
                    <i class="fas fa-chart-line text-orange-600 dark:text-orange-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">₹{{ number_format($paidPayments > 0 ? $totalRevenue / $paidPayments : 0, 0) }}</p>
                <div class="mt-1 flex items-center text-xs text-orange-600 dark:text-orange-400">
                    <span>Per transaction</span>
                </div>
            </div>
        </div>
        
        <!-- Payment Method Breakdown -->
        <div class="mb-4">
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Payment Methods</h4>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md">
                    <div class="flex items-center">
                        <i class="fas fa-money-bill-wave text-green-600 text-xs mr-2"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Cash</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $cashPayments }}</span>
                </div>
                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md">
                    <div class="flex items-center">
                        <i class="fas fa-university text-blue-600 text-xs mr-2"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Bank</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $bankPayments }}</span>
                </div>
                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md">
                    <div class="flex items-center">
                        <i class="fas fa-globe text-purple-600 text-xs mr-2"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Online</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $onlinePayments }}</span>
                </div>
                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md">
                    <div class="flex items-center">
                        <i class="fas fa-mobile-alt text-indigo-600 text-xs mr-2"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">UPI</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $upiPayments }}</span>
                </div>
                <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md">
                    <div class="flex items-center">
                        <i class="fas fa-hand-holding-usd text-orange-600 text-xs mr-2"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Debt</span>
                    </div>
                    <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $debtPayments }}</span>
                </div>
            </div>
        </div>
        
        <!-- Recent Payments Table -->
        <div>
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Recent Payments</h4>
            <div class="overflow-x-auto">
                <table class="min-w-full text-xs">
                    <thead class="bg-gray-50 dark:bg-gray-700/50">
                        <tr>
                            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">ID</th>
                            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Customer</th>
                            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Amount</th>
                            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Method</th>
                            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse($recentPayments as $payment)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-900 dark:text-gray-100">#{{ $payment->id }}</td>
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-900 dark:text-gray-100">{{ $payment->customer_name ?? 'N/A' }}</td>
                                <td class="px-2 py-1.5 whitespace-nowrap text-gray-900 dark:text-gray-100">₹{{ number_format($payment->amount, 2) }}</td>
                                <td class="px-2 py-1.5 whitespace-nowrap">
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium
                                        @if($payment->payment_method == 'cash') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                        @elseif($payment->payment_method == 'bank_transfer') bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                                        @elseif($payment->payment_method == 'online') bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200
                                        @elseif($payment->payment_method == 'upi') bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200
                                        @else bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 @endif">
                                        {{ ucfirst($payment->payment_method) }}
                                    </span>
                                </td>
                                <td class="px-2 py-1.5 whitespace-nowrap">
                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium
                                        @if($payment->status == 'paid') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                        @elseif($payment->status == 'pending') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                        @else bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 @endif">
                                        {{ ucfirst($payment->status) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-2 py-4 text-center text-xs text-gray-500 dark:text-gray-400">
                                    No recent payments found
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- Task Progress Widget -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Task Progress</h3>
            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                {{ $completedTasks }}/{{ $totalTasks }} Done
            </span>
        </div>
        
        <!-- Progress Overview -->
        <div class="space-y-3 mb-4">
            <div>
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Overall Progress</span>
                    <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $totalTasks > 0 ? round(($completedTasks / $totalTasks) * 100, 1) : 0 }}%</span>
                </div>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-500" style="width: {{ $totalTasks > 0 ? ($completedTasks / $totalTasks) * 100 : 0 }}%"></div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-2 text-center">
                <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-2 border border-green-200 dark:border-green-700">
                    <p class="text-lg font-bold text-green-600 dark:text-green-400">{{ $completedTasks }}</p>
                    <p class="text-xs text-gray-600 dark:text-gray-400">Completed</p>
                </div>
                <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-2 border border-yellow-200 dark:border-yellow-700">
                    <p class="text-lg font-bold text-yellow-600 dark:text-yellow-400">{{ $inProgressTasks }}</p>
                    <p class="text-xs text-gray-600 dark:text-gray-400">In Progress</p>
                </div>
            </div>
        </div>
        
        <!-- Recent Tasks -->
        <div>
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Recent Tasks</h4>
            <div class="space-y-2 max-h-48 overflow-y-auto">
                @forelse($recentTasks as $task)
                    <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                        <div class="flex-1 min-w-0">
                            <p class="text-xs font-medium text-gray-900 dark:text-gray-100 truncate">{{ $task->title }}</p>
                            <div class="flex items-center mt-0.5">
                                @if($task->technician)
                                    <span class="text-xs text-gray-500 dark:text-gray-400">{{ $task->technician->name }}</span>
                                @endif
                            </div>
                        </div>
                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium
                            @if($task->status == 'completed') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                            @elseif($task->status == 'in_progress') bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                            @elseif($task->status == 'assigned') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                            @else bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 @endif">
                            {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                        </span>
                    </div>
                @empty
                    <div class="text-center py-4 text-xs text-gray-500 dark:text-gray-400">
                        No recent tasks
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Apartment Wise Report Export -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4 mb-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Apartment Wise Report Export</h3>
        <div class="flex items-center space-x-2">
            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                <i class="fas fa-download mr-1 text-xs"></i>Export Reports
            </span>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        <!-- Apartment Search -->
        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Apartment</label>
            <div class="relative">
                <select id="apartmentSelect" class="w-full text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded px-2 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All Apartments</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-1.5 pointer-events-none">
                    <i class="fas fa-building text-gray-400 text-xs"></i>
                </div>
            </div>
        </div>
        
        <!-- Month Filter -->
        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Month</label>
            <div class="relative">
                <select id="monthSelect" class="w-full text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded px-2 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All Months</option>
                    <option value="1">January</option>
                    <option value="2">February</option>
                    <option value="3">March</option>
                    <option value="4">April</option>
                    <option value="5">May</option>
                    <option value="6">June</option>
                    <option value="7">July</option>
                    <option value="8">August</option>
                    <option value="9">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-1.5 pointer-events-none">
                    <i class="fas fa-calendar text-gray-400 text-xs"></i>
                </div>
            </div>
        </div>
        
        <!-- Year Filter -->
        <div>
            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Year</label>
            <div class="relative">
                <select id="yearSelect" class="w-full text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded px-2 py-1.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">All Years</option>
                    @for($year = date('Y'); $year >= date('Y') - 5; $year--)
                        <option value="{{ $year }}">{{ $year }}</option>
                    @endfor
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-1.5 pointer-events-none">
                    <i class="fas fa-calendar-alt text-gray-400 text-xs"></i>
                </div>
            </div>
        </div>
        
        <!-- Export Actions -->
        <div class="flex items-end space-x-2">
            <button onclick="showExportModal()" class="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white text-xs font-medium px-4 py-2 rounded transition-all duration-200 flex items-center justify-center shadow-md hover:shadow-lg">
                <i class="fas fa-download mr-2"></i>Export Report
            </button>
        </div>
    </div>
    
    <!-- Report Summary -->
    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-3">
        <div class="flex items-center justify-between mb-2">
            <div class="text-xs text-gray-600 dark:text-gray-400">
                <i class="fas fa-info-circle mr-1"></i>
                Export detailed apartment-wise reports including tickets, payments, and customer information
            </div>
            <div id="exportStatus" class="text-xs text-gray-500 dark:text-gray-400">
                Ready to export
            </div>
        </div>
        
        <!-- Technician Preview -->
        <div id="technicianPreview" class="hidden mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
            <h4 class="text-xs font-semibold text-blue-800 dark:text-blue-200 mb-2">
                <i class="fas fa-users mr-1"></i>Assigned Technicians
            </h4>
            <div id="technicianList" class="space-y-1">
                <!-- Technicians will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Export Format Selection Modal -->
<div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                    <i class="fas fa-download mr-2 text-blue-500"></i>Export Report
                </h3>
                <button onclick="closeExportModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="mb-4">
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Choose the format for your apartment-wise report export:
                </p>
                
                <div class="space-y-3">
                    <button onclick="exportReport('pdf')" class="w-full flex items-center justify-between p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-file-pdf text-red-600 dark:text-red-400"></i>
                            </div>
                            <div class="text-left">
                                <p class="font-medium text-gray-900 dark:text-gray-100">PDF Format</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Best for printing and sharing</p>
                            </div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <button onclick="exportReport('excel')" class="w-full flex items-center justify-between p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-file-excel text-green-600 dark:text-green-400"></i>
                            </div>
                            <div class="text-left">
                                <p class="font-medium text-gray-900 dark:text-gray-100">Excel Format</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Best for data analysis</p>
                            </div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <button onclick="exportReport('csv')" class="w-full flex items-center justify-between p-3 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-file-csv text-blue-600 dark:text-blue-400"></i>
                            </div>
                            <div class="text-left">
                                <p class="font-medium text-gray-900 dark:text-gray-100">CSV Format</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Best for importing to other systems</p>
                            </div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </button>
                </div>
            </div>
            
            <div class="flex justify-end space-x-3">
                <button onclick="closeExportModal()" class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Activity Feed & User Profile -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <!-- Real-time Activity Feed -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h3>
            <div class="flex items-center space-x-2">
                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                <span class="text-xs text-gray-600 dark:text-gray-400">Live</span>
                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" onclick="refreshActivityFeed()">
                    <i class="fas fa-sync-alt text-xs"></i>
                </button>
            </div>
        </div>
        <div class="space-y-2 max-h-80 overflow-y-auto pr-2" id="activityFeed" style="scrollbar-width: thin; scrollbar-color: #CBD5E1 #F1F5F9;">
            <style>
                #activityFeed::-webkit-scrollbar {
                    width: 4px;
                }
                #activityFeed::-webkit-scrollbar-track {
                    background: #F1F5F9;
                    border-radius: 2px;
                }
                #activityFeed::-webkit-scrollbar-thumb {
                    background: #CBD5E1;
                    border-radius: 2px;
                }
                #activityFeed::-webkit-scrollbar-thumb:hover {
                    background: #94A3B8;
                }
                .dark #activityFeed::-webkit-scrollbar-track {
                    background: #374151;
                }
                .dark #activityFeed::-webkit-scrollbar-thumb {
                    background: #6B7280;
                }
            </style>
            <!-- Dynamic Activity Items will be loaded here -->
            <div id="activityFeedContent">
                @forelse($recentTickets->take(3) as $ticket)
                    <div class="flex items-start space-x-2 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded transition-all duration-200 border-l-2 border-transparent hover:border-blue-500">
                        <div class="flex-shrink-0 w-8 h-8 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 rounded-full flex items-center justify-center">
                            <i class="fas fa-plus text-blue-600 dark:text-blue-300 text-xs"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between">
                                <p class="text-xs text-gray-900 dark:text-gray-100">
                                    <span class="font-medium">New ticket</span> #{{ $ticket->ticket_id }} created by {{ $ticket->first_name }} {{ $ticket->last_name }}
                                </p>
                                <span class="text-xs text-gray-500 dark:text-gray-400">{{ $ticket->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">{{ $ticket->apartment->name ?? 'Unknown Apartment' }}</p>
                            <div class="mt-1 flex items-center space-x-1">
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium 
                                    @if($ticket->priority == 'high') bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                                    @elseif($ticket->priority == 'medium') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                                    @else bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 @endif">
                                    <i class="fas fa-flag mr-1 text-xs"></i>{{ ucfirst($ticket->priority) }}
                                </span>
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                                    <i class="fas fa-clock mr-1 text-xs"></i>{{ ucfirst($ticket->status) }}
                                </span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4 text-xs text-gray-500 dark:text-gray-400">
                        No recent activity
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- User Profile & Notifications -->
    <div class="space-y-4">
        <!-- User Profile Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Profile</h3>
                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                    <i class="fas fa-cog text-sm"></i>
                </button>
            </div>
            
            <div class="flex flex-col items-center">
                <div class="relative">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-lg font-bold shadow-md">
                        {{ substr(Auth::user()->name, 0, 1) }}
                    </div>
                    <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 flex items-center justify-center">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                </div>
                <h4 class="mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</h4>
                <p class="text-xs text-gray-600 dark:text-gray-400">{{ Auth::user()->email }}</p>
                <div class="mt-2 flex items-center justify-center">
                    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                        <i class="fas fa-shield-alt mr-1 text-xs"></i>Administrator
                    </span>
                </div>
            </div>
            
            <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
                <div class="grid grid-cols-2 gap-3 text-center">
                    <div>
                        <p class="text-lg font-bold text-gray-800 dark:text-gray-200">142</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Tickets Handled</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold text-green-600 dark:text-green-400">98%</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Success Rate</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-3">
                <button class="w-full px-3 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-md hover:from-blue-600 hover:to-blue-700 transition-all duration-200 text-sm font-medium shadow-sm hover:shadow-md">
                    <i class="fas fa-user-edit mr-2 text-xs"></i>Edit Profile
                </button>
            </div>
        </div>

        <!-- Notifications Card -->
        <div class="bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4 border border-purple-200 dark:border-purple-700">
            <div class="flex items-center justify-between mb-3">
                <div>
                    <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Notifications</h3>
                    <div class="flex items-baseline mt-1">
                        <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $unreadNotifications }}</p>
                        <p class="text-xs text-gray-600 dark:text-gray-400 ml-1">pending</p>
                    </div>
                </div>
                <div class="relative">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-full flex items-center justify-center shadow-md">
                        <i class="fas fa-bell text-white text-lg"></i>
                    </div>
                    <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center border-2 border-white dark:border-gray-800 animate-pulse">
                        <span class="text-white text-xs font-bold">!</span>
                    </div>
                </div>
            </div>
            
            <div class="space-y-2">
                <div class="flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded-md">
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Live updates active</span>
                    </div>
                    <span class="text-xs text-gray-500 dark:text-gray-400">1 min ago</span>
                </div>
                
                <div class="flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded-md">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-ticket-alt text-purple-500 text-xs"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">High priority tickets</span>
                    </div>
                    <span class="text-xs font-semibold text-purple-600 dark:text-purple-400">8</span>
                </div>
                
                <div class="flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded-md">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-user-clock text-blue-500 text-xs"></i>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Unassigned</span>
                    </div>
                    <span class="text-xs font-semibold text-blue-600 dark:text-blue-400">12</span>
                </div>
            </div>
            
            <div class="mt-3 pt-2 border-t border-purple-200 dark:border-purple-700">
                <a href="{{ route('admin.notifications.index') }}" class="w-full inline-flex items-center justify-center px-3 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-white text-xs font-medium rounded-md hover:from-purple-600 hover:to-indigo-700 transition-all duration-200 shadow-sm hover:shadow-md">
                    <i class="fas fa-eye mr-2 text-xs"></i>View All Notifications
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Recent Tickets -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Recent Tickets</h3>
            <div class="flex flex-col sm:flex-row gap-2">
                <!-- Advanced Search Bar -->
                <div class="relative" x-data="{ search: '', showSuggestions: false }">
                    <input type="text" 
                           x-model="search"
                           @focus="showSuggestions = true"
                           @blur="setTimeout(() => showSuggestions = false, 200)"
                           placeholder="Search tickets..." 
                           class="pl-8 pr-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-gray-200 w-full sm:w-64 transition-colors duration-200">
                    <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                    
                    <!-- Search Suggestions Dropdown -->
                    <div x-show="showSuggestions && search.length > 0" 
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="transform opacity-0 scale-95"
                         x-transition:enter-end="transform opacity-100 scale-100"
                         class="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-600">
                        <div class="p-2">
                            <div class="px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-medium">Suggestions</div>
                            <a href="#" class="block px-2 py-1 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Search in tickets...</a>
                            <a href="#" class="block px-2 py-1 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Search customers...</a>
                            <a href="#" class="block px-2 py-1 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Search apartments...</a>
                        </div>
                    </div>
                </div>
                
                <!-- Enhanced Filter Dropdown -->
                <div class="relative" x-data="{ open: false, filters: { status: 'all', priority: 'all', dateRange: 'all', customDateRange: null } }">
                    <button @click="open = !open" class="px-3 py-1.5 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md text-xs font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent flex items-center transition-colors duration-200">
                        <i class="fas fa-filter mr-1.5 text-xs"></i>
                        Filters
                        <span x-show="filters.status !== 'all' || filters.priority !== 'all' || filters.dateRange !== 'all'" 
                              class="ml-1.5 px-1.5 py-0.5 bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300 rounded text-xs font-medium">
                            Active
                        </span>
                        <i class="fas fa-chevron-down ml-1.5 text-xs"></i>
                    </button>
                    <div x-show="open" 
                         @click.away="open = false"
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="transform opacity-0 scale-95"
                         x-transition:enter-end="transform opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-75"
                         x-transition:leave-start="transform opacity-100 scale-100"
                         x-transition:leave-end="transform opacity-0 scale-95"
                         class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-600">
                        <div class="p-4">
                            <h4 class="text-xs font-semibold text-gray-900 dark:text-gray-100 mb-3">Filter Options</h4>
                            
                            <!-- Status Filter -->
                            <div class="mb-3">
                                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                                <select x-model="filters.status" class="w-full px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                                    <option value="all">All Status</option>
                                    <option value="open">Open</option>
                                    <option value="assigned">Assigned</option>
                                    <option value="in_progress">In Progress</option>
                                    <option value="completed">Completed</option>
                                </select>
                            </div>
                            
                            <!-- Priority Filter -->
                            <div class="mb-3">
                                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Priority</label>
                                <select x-model="filters.priority" class="w-full px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                                    <option value="all">All Priorities</option>
                                    <option value="high">High</option>
                                    <option value="medium">Medium</option>
                                    <option value="low">Low</option>
                                </select>
                            </div>
                            
                            <!-- Date Range Filter -->
                            <div class="mb-3">
                                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Date Range</label>
                                <select x-model="filters.dateRange" @change="handleDateRangeChange($event)" class="w-full px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                                    <option value="all">All Time</option>
                                    <option value="today">Today</option>
                                    <option value="week">This Week</option>
                                    <option value="month">This Month</option>
                                    <option value="year">This Year</option>
                                    <option value="custom">Custom Range</option>
                                </select>
                            </div>
                            
                            <!-- Custom Date Range (shown when custom is selected) -->
                            <div x-show="filters.dateRange === 'custom'" x-transition class="mb-3">
                                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Custom Date Range</label>
                                <input type="text" 
                                       x-ref="dateRangePicker"
                                       placeholder="Select date range..."
                                       class="w-full px-2 py-1.5 text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-md focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
                            </div>
                            
                            <!-- Action Buttons -->
                            <div class="flex space-x-2">
                                <button @click="applyFilters(); open = false" class="flex-1 px-2 py-1.5 bg-blue-600 text-white text-xs font-medium rounded-md hover:bg-blue-700 transition-colors duration-200">
                                    Apply
                                </button>
                                <button @click="resetFilters(); open = false" class="flex-1 px-2 py-1.5 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-xs font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Enhanced Export Button -->
                <div class="relative" x-data="{ open: false }">
                    <button @click="open = !open" class="px-3 py-1.5 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-md text-xs font-medium hover:from-green-600 hover:to-green-700 transition-all duration-200 flex items-center shadow-sm hover:shadow-md">
                        <i class="fas fa-download mr-1.5 text-xs"></i>
                        Export
                        <i class="fas fa-chevron-down ml-1.5 text-xs"></i>
                    </button>
                    <div x-show="open" 
                         @click.away="open = false"
                         x-transition:enter="transition ease-out duration-100"
                         x-transition:enter-start="transform opacity-0 scale-95"
                         x-transition:enter-end="transform opacity-100 scale-100"
                         class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-600">
                        <div class="py-1">
                            <a href="#" @click="exportData('csv'); open = false" class="block px-3 py-1.5 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
                                <i class="fas fa-file-csv mr-1.5 text-green-600 text-xs"></i>Export as CSV
                            </a>
                            <a href="#" @click="exportData('excel'); open = false" class="block px-3 py-1.5 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
                                <i class="fas fa-file-excel mr-1.5 text-green-600 text-xs"></i>Export as Excel
                            </a>
                            <a href="#" @click="exportData('pdf'); open = false" class="block px-3 py-1.5 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
                                <i class="fas fa-file-pdf mr-1.5 text-red-600 text-xs"></i>Export as PDF
                            </a>
                            <a href="#" @click="exportData('json'); open = false" class="block px-3 py-1.5 text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
                                <i class="fas fa-file-code mr-1.5 text-blue-600 text-xs"></i>Export as JSON
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700">
                <tr>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Ticket ID
                    </th>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Customer
                    </th>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Apartment
                    </th>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Priority
                    </th>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Technician
                    </th>
                    <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-100 dark:divide-gray-700">
                @forelse($recentTickets as $ticket)
                    <tr class="hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all duration-150">
                        <td class="px-3 py-3 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-8 w-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                                    <span class="text-xs font-semibold text-blue-600 dark:text-blue-300">#{{ substr($ticket->ticket_id, -3) }}</span>
                                </div>
                                <div class="ml-2">
                                    <p class="text-xs font-medium text-gray-900 dark:text-gray-100">{{ $ticket->ticket_id }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center">
                                    <i class="fas fa-user text-xs text-gray-600 dark:text-gray-300"></i>
                                </div>
                                <div class="ml-2">
                                    <p class="text-xs font-medium text-gray-900 dark:text-gray-100">{{ $ticket->first_name }} {{ $ticket->last_name }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <div class="flex items-center">
                                <i class="fas fa-building text-gray-400 dark:text-gray-500 mr-1.5 text-xs"></i>
                                <span class="text-xs text-gray-900 dark:text-gray-100">{{ $ticket->apartment->name }}</span>
                            </div>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
                                @if($ticket->priority == 'high') bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 ring-1 ring-red-200
                                @elseif($ticket->priority == 'medium') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 ring-1 ring-yellow-200
                                @else bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 ring-1 ring-green-200 @endif">
                                <i class="fas fa-flag mr-1 text-xs"></i>
                                {{ ucfirst($ticket->priority) }}
                            </span>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium
                                @if($ticket->status == 'completed') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 ring-1 ring-green-200
                                @elseif($ticket->status == 'in_progress') bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 ring-1 ring-blue-200
                                @elseif($ticket->status == 'assigned') bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 ring-1 ring-yellow-200
                                @else bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 ring-1 ring-gray-200 @endif">
                                @if($ticket->status == 'completed')
                                    <i class="fas fa-check-circle mr-1 text-xs"></i>
                                @elseif($ticket->status == 'in_progress')
                                    <i class="fas fa-spinner mr-1 text-xs"></i>
                                @elseif($ticket->status == 'assigned')
                                    <i class="fas fa-user-clock mr-1 text-xs"></i>
                                @else
                                    <i class="fas fa-exclamation-circle mr-1 text-xs"></i>
                                @endif
                                {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                            </span>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            @if($ticket->technician)
                                <div class="flex items-center">
                                    <div class="h-6 w-6 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center">
                                        <i class="fas fa-user text-xs text-indigo-600 dark:text-indigo-300"></i>
                                    </div>
                                    <span class="ml-1.5 text-xs text-gray-900 dark:text-gray-100">{{ $ticket->technician->name }}</span>
                                </div>
                            @else
                                <span class="text-xs text-gray-500 dark:text-gray-400 italic">Not Assigned</span>
                            @endif
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-xs font-medium">
                            <div class="flex space-x-1.5">
                                <a href="{{ route('admin.tickets.show', $ticket) }}" 
                                   class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700 transition-colors duration-150 shadow-sm hover:shadow-md">
                                    <i class="fas fa-eye mr-1 text-xs"></i>
                                    View
                                </a>
                                <button class="inline-flex items-center px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs font-medium rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-150">
                                    <i class="fas fa-edit mr-1 text-xs"></i>
                                    Edit
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-3 py-8 text-center">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-inbox text-3xl text-gray-300 dark:text-gray-600 mb-2"></i>
                                <p class="text-xs text-gray-500 dark:text-gray-400 font-medium">No tickets found</p>
                                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Create your first ticket to get started</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($recentTickets->count() > 0)
        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-800 dark:to-gray-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <p class="text-xs text-gray-600 dark:text-gray-400">
                    Showing <span class="font-semibold text-gray-800 dark:text-gray-200">{{ $recentTickets->count() }}</span> of 
                    <span class="font-semibold text-gray-800 dark:text-gray-200">{{ $totalTickets }}</span> tickets
                </p>
                <a href="{{ route('admin.tickets.index') }}" 
                   class="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white text-xs font-medium rounded-md hover:bg-blue-700 transition-colors duration-150 shadow-sm hover:shadow-md">
                    <span>View All Tickets</span>
                    <i class="fas fa-arrow-right ml-1.5 text-xs"></i>
                </a>
            </div>
        </div>
    @endif
</div>

<!-- Performance Analytics Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
    <!-- Technician Performance Analytics -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Technician Performance</h3>
            <div class="flex items-center space-x-2">
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                    {{ $technicianEfficiency }}% Avg Efficiency
                </span>
            </div>
        </div>
        
        <!-- Performance Metrics Grid -->
        <div class="grid grid-cols-2 gap-3 mb-4">
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-lg p-3 border border-blue-200 dark:border-blue-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Avg Response</span>
                    <i class="fas fa-clock text-blue-600 dark:text-blue-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">{{ $avgResponseTime }}h</p>
                <div class="mt-1 flex items-center text-xs text-blue-600 dark:text-blue-400">
                    <i class="fas fa-arrow-down mr-1"></i>
                    <span>-15% this week</span>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-lg p-3 border border-green-200 dark:border-green-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Resolution Rate</span>
                    <i class="fas fa-check-circle text-green-600 dark:text-green-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">{{ $resolutionRate }}%</p>
                <div class="mt-1 flex items-center text-xs text-green-600 dark:text-green-400">
                    <i class="fas fa-arrow-up mr-1"></i>
                    <span>+8% improvement</span>
                </div>
            </div>
        </div>
        
        <!-- Top Performing Technicians -->
        <div class="mb-4">
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Top Performers</h4>
            <div class="space-y-2">
                @forelse($topTechnicians as $index => $technician)
                    <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gradient-to-br from-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-100 to-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-200 dark:from-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-900 dark:to-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-800 rounded-full flex items-center justify-center mr-3">
                                <span class="text-xs font-bold text-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-600 dark:text-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-300">{{ $index + 1 }}</span>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-800 dark:text-gray-200">{{ $technician->name }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $technician->completed_tickets }}/{{ $technician->tickets_count }} completed</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs font-bold text-gray-800 dark:text-gray-200">
                                {{ $technician->tickets_count > 0 ? round(($technician->completed_tickets / $technician->tickets_count) * 100, 1) : 0 }}%
                            </p>
                            <p class="text-xs text-green-600 dark:text-green-400">efficiency</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4 text-xs text-gray-500 dark:text-gray-400">
                        No technician data available
                    </div>
                @endforelse
            </div>
        </div>
        
        <!-- Workload Distribution -->
        <div>
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Workload Distribution</h4>
            <div class="space-y-2">
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Available Technicians</span>
                    <div class="flex items-center">
                        <div class="w-20 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: {{ $totalTechnicians > 0 ? ($freeTechnicians / $totalTechnicians) * 100 : 0 }}%"></div>
                        </div>
                        <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $freeTechnicians }}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Currently Assigned</span>
                    <div class="flex items-center">
                        <div class="w-20 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: {{ $totalTechnicians > 0 ? ($assignedTechnicians / $totalTechnicians) * 100 : 0 }}%"></div>
                        </div>
                        <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $assignedTechnicians }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Apartment Analytics -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">Apartment Analytics</h3>
            <div class="flex items-center space-x-2">
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                    {{ $totalApartments }} Total
                </span>
            </div>
        </div>
        
        <!-- Apartment Statistics -->
        <div class="grid grid-cols-2 gap-3 mb-4">
            <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-lg p-3 border border-purple-200 dark:border-purple-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">Avg Tickets</span>
                    <i class="fas fa-ticket-alt text-purple-600 dark:text-purple-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">{{ $totalApartments > 0 ? round($totalTickets / $totalApartments, 1) : 0 }}</p>
                <div class="mt-1 flex items-center text-xs text-purple-600 dark:text-purple-400">
                    <span>Per apartment</span>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 rounded-lg p-3 border border-red-200 dark:border-red-700">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-600 dark:text-gray-400">High Priority</span>
                    <i class="fas fa-flag text-red-600 dark:text-red-400 text-xs"></i>
                </div>
                <p class="text-lg font-bold text-gray-800 dark:text-gray-200">{{ $highPriorityTickets }}</p>
                <div class="mt-1 flex items-center text-xs text-red-600 dark:text-red-400">
                    <span>Need attention</span>
                </div>
            </div>
        </div>
        
        <!-- Top Performing Apartments -->
        <div>
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Top Apartments by Performance</h4>
            <div class="space-y-2">
                @forelse($topApartments as $index => $apartment)
                    <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                        <div class="flex items-center">
                            <div class="w-6 h-6 bg-gradient-to-br from-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-100 to-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-200 dark:from-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-900 dark:to-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-800 rounded-full flex items-center justify-center mr-2">
                                <span class="text-xs font-bold text-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-600 dark:text-{{ ['blue', 'green', 'purple', 'orange', 'indigo'][$index % 5] }}-300">{{ $index + 1 }}</span>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-800 dark:text-gray-200">{{ $apartment->name }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $apartment->tickets_count }} tickets</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs font-bold text-gray-800 dark:text-gray-200">
                                {{ $apartment->tickets_count > 0 ? round(($apartment->completed_tickets / $apartment->tickets_count) * 100, 1) : 0 }}%
                            </p>
                            <p class="text-xs text-green-600 dark:text-green-400">resolved</p>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4 text-xs text-gray-500 dark:text-gray-400">
                        No apartment data available
                    </div>
                @endforelse
            </div>
        </div>
        
        <!-- Priority Distribution -->
        <div class="mt-4">
            <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">Priority Distribution</h4>
            <div class="space-y-2">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-400">High Priority</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-16 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                            <div class="bg-red-500 h-2 rounded-full" style="width: {{ $totalTickets > 0 ? ($highPriorityTickets / $totalTickets) * 100 : 0 }}%"></div>
                        </div>
                        <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $highPriorityTickets }}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-400">Medium Priority</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-16 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                            <div class="bg-yellow-500 h-2 rounded-full" style="width: {{ $totalTickets > 0 ? ($mediumPriorityTickets / $totalTickets) * 100 : 0 }}%"></div>
                        </div>
                        <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $mediumPriorityTickets }}</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                        <span class="text-xs text-gray-600 dark:text-gray-400">Low Priority</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-16 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mr-2">
                            <div class="bg-green-500 h-2 rounded-full" style="width: {{ $totalTickets > 0 ? ($lowPriorityTickets / $totalTickets) * 100 : 0 }}%"></div>
                        </div>
                        <span class="text-xs font-semibold text-gray-800 dark:text-gray-200">{{ $lowPriorityTickets }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Enhanced Real-time Updates Widget -->
<div class="fixed bottom-4 right-4 z-50" x-data="{ 
    show: true, 
    isExpanded: false,
    lastUpdate: new Date(),
    updateCount: 0,
    monitoredItems: ['tickets', 'technicians', 'metrics'],
    connectionStatus: 'connected',
    
    async refreshNow() {
        this.connectionStatus = 'connected';
        try {
            const response = await fetch('/admin/api/live-updates');
            const updates = await response.json();
            this.updateCount = updates.totalUpdates;
            this.lastUpdate = new Date(updates.updatedTimestamp);
            
            // Trigger dashboard refresh
            if (typeof refreshActivityFeed === 'function') {
                refreshActivityFeed();
            }
            if (typeof updateMetrics === 'function') {
                updateMetrics();
            }
        } catch (error) {
            this.connectionStatus = 'disconnected';
            console.error('Error refreshing updates:', error);
        }
    },
    
    init() {
        // Initialize with real data
        this.refreshNow();
        
        // Set up periodic updates
        setInterval(() => {
            if (this.connectionStatus === 'connected') {
                this.refreshNow();
            }
        }, 30000); // Update every 30 seconds
    }
}" x-show="show" x-transition>
    <div class="bg-white/95 dark:bg-gray-800/95 backdrop-blur-md rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50 overflow-hidden" 
         :class="isExpanded ? 'w-72' : 'w-auto'">
        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-3 py-2.5 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="relative">
                    <div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                    <div class="absolute inset-0 w-2 h-2 bg-white rounded-full animate-ping opacity-75"></div>
                </div>
                <div>
                    <span class="text-xs font-semibold">Live Updates</span>
                    <div x-show="!isExpanded" class="text-xs opacity-90" x-text="updateCount + ' updates'"></div>
                </div>
            </div>
            <div class="flex items-center space-x-1">
                <button @click="isExpanded = !isExpanded" class="text-white/80 hover:text-white transition-colors p-1 rounded hover:bg-white/20">
                    <i class="fas fa-chevron-down text-xs transition-transform" :class="isExpanded ? 'rotate-180' : ''"></i>
                </button>
                <button @click="show = false" class="text-white/80 hover:text-white transition-colors p-1 rounded hover:bg-white/20">
                    <i class="fas fa-times text-xs"></i>
                </button>
            </div>
        </div>
        
        <!-- Expanded Content -->
        <div x-show="isExpanded" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" class="p-3">
            <!-- Connection Status -->
            <div class="mb-3 p-2 bg-gray-50 dark:bg-gray-700/50 rounded-md">
                <div class="flex items-center justify-between mb-1.5">
                    <span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Connection</span>
                    <span class="text-xs px-1.5 py-0.5 rounded-full font-medium"
                          :class="connectionStatus === 'connected' ? 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300' : 'bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300'"
                          x-text="connectionStatus === 'connected' ? 'Connected' : 'Disconnected'"></span>
                </div>
                <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-1.5">
                    <div class="bg-gradient-to-r from-green-400 to-green-600 h-1.5 rounded-full transition-all duration-500" style="width: 100%"></div>
                </div>
            </div>
            
            <!-- Monitored Items -->
            <div class="mb-3">
                <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center">
                    <i class="fas fa-chart-line mr-1.5 text-blue-500 text-xs"></i>Active Monitoring
                </h4>
                <div class="grid grid-cols-3 gap-1.5">
                    <template x-for="item in monitoredItems" :key="item">
                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-md p-1.5 text-center">
                            <div class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse mx-auto mb-1"></div>
                            <span class="text-xs font-medium text-gray-700 dark:text-gray-300 capitalize" x-text="item"></span>
                        </div>
                    </template>
                </div>
            </div>
            
            <!-- Activity Stats -->
            <div class="mb-3 grid grid-cols-2 gap-2">
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-md p-2">
                    <p class="text-xs text-gray-600 dark:text-gray-400 mb-0.5">Last Update</p>
                    <p class="text-xs font-semibold text-gray-800 dark:text-gray-200" x-text="lastUpdate.toLocaleTimeString()"></p>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-md p-2">
                    <p class="text-xs text-gray-600 dark:text-gray-400 mb-0.5">Total Updates</p>
                    <p class="text-xs font-semibold text-gray-800 dark:text-gray-200" x-text="updateCount"></p>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex space-x-1.5">
                <button @click="refreshNow()" class="flex-1 px-2 py-1.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white text-xs font-medium rounded-md hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-sm hover:shadow-md">
                    <i class="fas fa-sync-alt mr-1 text-xs"></i>Refresh
                </button>
                <button @click="toggleMonitoring()" class="flex-1 px-2 py-1.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">
                    <i class="fas fa-pause mr-1 text-xs"></i>Pause
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Keyboard Shortcuts System
document.addEventListener('keydown', function(event) {
    // Only trigger shortcuts when not in an input field
    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.contentEditable === 'true') {
        return;
    }
    
    // Ctrl/Cmd + Key combinations
    if (event.ctrlKey || event.metaKey) {
        switch(event.key.toLowerCase()) {
            case 'n':
                event.preventDefault();
                window.location.href = '{{ route("admin.tickets.create") }}';
                break;
            case 't':
                event.preventDefault();
                window.location.href = '{{ route("admin.technicians.create") }}';
                break;
            case 'a':
                event.preventDefault();
                window.location.href = '{{ route("admin.apartments.create") }}';
                break;
            case 'r':
                event.preventDefault();
                window.location.href = '{{ route("admin.reports") }}';
                break;
            case 'f':
                event.preventDefault();
                // Focus search input
                const searchInput = document.querySelector('input[placeholder*="Search"]');
                if (searchInput) {
                    searchInput.focus();
                }
                break;
            case 'e':
                event.preventDefault();
                // Open export dropdown
                const exportButton = document.querySelector('button:has(.fa-download)');
                if (exportButton) {
                    exportButton.click();
                }
                break;
            case 'd':
                event.preventDefault();
                // Toggle dark mode
                const isDark = document.documentElement.classList.contains('dark');
                toggleDarkMode(!isDark);
                break;
        }
    }
    
    // Single key shortcuts
    switch(event.key) {
        case 'Escape':
            // Close all dropdowns and modals
            document.querySelectorAll('[x-show]').forEach(el => {
                if (el._x_dataStack && el._x_dataStack[0].open !== undefined) {
                    el._x_dataStack[0].open = false;
                }
            });
            break;
        case '/':
            event.preventDefault();
            // Quick search
            const searchInput = document.querySelector('input[placeholder*="Search"]');
            if (searchInput) {
                searchInput.focus();
            }
            break;
        case '1':
            event.preventDefault();
            // Navigate to tickets
            window.location.href = '{{ route("admin.tickets.index") }}';
            break;
        case '2':
            event.preventDefault();
            // Navigate to technicians
            window.location.href = '{{ route("admin.technicians.index") }}';
            break;
        case '3':
            event.preventDefault();
            // Navigate to apartments
            window.location.href = '{{ route("admin.apartments.index") }}';
            break;
        case '4':
            event.preventDefault();
            // Navigate to tasks
            window.location.href = '{{ route("admin.tasks.index") }}';
            break;
        case '5':
            event.preventDefault();
            // Navigate to payments
            window.location.href = '{{ route("admin.payments.index") }}';
            break;
    }
});

// Show keyboard shortcuts help
function showKeyboardShortcuts() {
    const shortcuts = [
        { key: 'Ctrl+N', description: 'Create New Ticket' },
        { key: 'Ctrl+T', description: 'Add Technician' },
        { key: 'Ctrl+A', description: 'Add Apartment' },
        { key: 'Ctrl+R', description: 'View Reports' },
        { key: 'Ctrl+F', description: 'Focus Search' },
        { key: 'Ctrl+E', description: 'Export Data' },
        { key: 'Ctrl+D', description: 'Toggle Dark Mode' },
        { key: 'Escape', description: 'Close Dropdowns' },
        { key: '/', description: 'Quick Search' },
        { key: '1-5', description: 'Quick Navigation' }
    ];
    
    let shortcutsHtml = '<div class="mb-2"><h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">Keyboard Shortcuts</h4><div class="space-y-1">';
    shortcuts.forEach(shortcut => {
        shortcutsHtml += `
            <div class="flex justify-between items-center py-1">
                <span class="text-xs text-gray-600 dark:text-gray-400">${shortcut.description}</span>
                <kbd class="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded">${shortcut.key}</kbd>
            </div>
        `;
    });
    shortcutsHtml += '</div></div>';
    
    showNotification('Keyboard shortcuts: Press Ctrl+? to see all shortcuts', 'info');
}

// Add keyboard shortcuts indicator to the profile section
document.addEventListener('DOMContentLoaded', function() {
    const profileSection = document.querySelector('.bg-white\\/95.dark\\:bg-gray-800\\/95');
    if (profileSection) {
        // Add keyboard shortcuts hint
        setTimeout(() => {
            showNotification('💡 Tip: Press Ctrl+? for keyboard shortcuts', 'info', 5000);
        }, 3000);
    }
});

// Enhanced notification system with real-time updates
function updateNotificationCount() {
    // Simulate real-time notification count updates
    const notificationElements = document.querySelectorAll('.text-2xl.font-bold.text-purple-600');
    notificationElements.forEach(el => {
        if (el.textContent.includes('{{ $unreadNotifications }}')) {
            // In a real application, this would fetch from API
            const currentCount = parseInt('{{ $unreadNotifications }}');
            const newCount = currentCount + Math.floor(Math.random() * 3);
            if (newCount > currentCount) {
                el.textContent = newCount;
                showNotification(`You have ${newCount} new notifications`, 'info');
            }
        }
    });
}

// Update notifications every 30 seconds
setInterval(updateNotificationCount, 30000);

// Mobile responsive optimizations
function optimizeForMobile() {
    if (window.innerWidth < 768) {
        // Collapse sidebar on mobile
        const sidebar = document.querySelector('.sidebar');
        if (sidebar) {
            sidebar.classList.add('-translate-x-full');
        }
        
        // Optimize table for mobile
        const tables = document.querySelectorAll('.overflow-x-auto table');
        tables.forEach(table => {
            table.classList.add('text-xs');
        });
        
        // Adjust card layouts for mobile
        const gridCols = document.querySelectorAll('.grid-cols-1.lg\\:grid-cols-4');
        gridCols.forEach(grid => {
            grid.classList.remove('lg:grid-cols-4');
            grid.classList.add('lg:grid-cols-2');
        });
    }
}

// Initialize mobile optimizations
window.addEventListener('resize', optimizeForMobile);
optimizeForMobile();

// Performance optimization: Lazy load charts
const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
};

const chartObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Initialize charts when they come into view
            if (!window.statusPieChart) {
                initializeStatusPieChart();
                initializeWorkloadBarChart();
                initializeResponseTimeChart();
            }
            chartObserver.unobserve(entry.target);
        }
    });
}, observerOptions);

// Observe chart containers
document.addEventListener('DOMContentLoaded', function() {
    const chartContainers = document.querySelectorAll('canvas');
    chartContainers.forEach(container => {
        chartObserver.observe(container.parentElement);
    });
});

// Enhanced error handling
window.addEventListener('error', function(event) {
    console.error('Dashboard error:', event.error);
    showNotification('An error occurred. Please refresh the page.', 'error');
});

// Add loading states
function showLoadingState(element) {
    element.classList.add('opacity-50', 'pointer-events-none');
    const loader = document.createElement('div');
    loader.className = 'absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-gray-800/50';
    loader.innerHTML = '<i class="fas fa-spinner fa-spin text-blue-600 dark:text-blue-400"></i>';
    element.style.position = 'relative';
    element.appendChild(loader);
}

function hideLoadingState(element) {
    element.classList.remove('opacity-50', 'pointer-events-none');
    const loader = element.querySelector('.absolute.inset-0');
    if (loader) {
        loader.remove();
    }
}

// Enhanced accessibility
document.addEventListener('DOMContentLoaded', function() {
    // Add ARIA labels to interactive elements
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        if (!button.getAttribute('aria-label') && !button.textContent.trim()) {
            button.setAttribute('aria-label', 'Interactive button');
        }
    });
    
    // Add keyboard navigation to dropdowns
    const dropdowns = document.querySelectorAll('[x-data*="open"]');
    dropdowns.forEach(dropdown => {
        dropdown.setAttribute('tabindex', '0');
        dropdown.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                if (dropdown._x_dataStack && dropdown._x_dataStack[0].open !== undefined) {
                    dropdown._x_dataStack[0].open = !dropdown._x_dataStack[0].open;
                }
            }
        });
    });
});

// Enhanced real-time updates with WebSocket fallback
function initializeRealTimeUpdates() {
    // Try WebSocket first
    if (window.WebSocket) {
        try {
            const ws = new WebSocket('ws://localhost:8080/dashboard-updates');
            ws.onmessage = function(event) {
                const data = JSON.parse(event.data);
                handleRealTimeUpdate(data);
            };
            ws.onerror = function() {
                // Fallback to polling
                initializePollingUpdates();
            };
        } catch (e) {
            initializePollingUpdates();
        }
    } else {
        initializePollingUpdates();
    }
}

function handleRealTimeUpdate(data) {
    switch(data.type) {
        case 'new_ticket':
            showNotification(`New ticket #${data.ticketId} created`, 'info');
            updateMetrics();
            break;
        case 'ticket_updated':
            showNotification(`Ticket #${data.ticketId} updated`, 'success');
            updateMetrics();
            break;
        case 'payment_received':
            showNotification(`Payment of ₹${data.amount} received`, 'success');
            updateMetrics();
            break;
    }
}

function initializePollingUpdates() {
    // Fallback polling mechanism
    setInterval(() => {
        // Simulate real-time updates
        if (Math.random() > 0.8) {
            showNotification('Dashboard data refreshed', 'info');
            updateMetrics();
        }
    }, 30000);
}

// Initialize all enhancements
document.addEventListener('DOMContentLoaded', function() {
    initializeDarkMode();
    initializeStatusPieChart();
    initializeWorkloadBarChart();
    initializeResponseTimeChart();
    startRealTimeUpdates();
    initializeRealTimeUpdates();
    optimizeForMobile();
});

// Dark Mode Functionality
function initializeDarkMode() {
    const darkMode = localStorage.getItem('darkMode') === 'true';
    if (darkMode) {
        document.documentElement.classList.add('dark');
    }
}

function toggleDarkMode(isDark) {
    if (isDark) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
    // Update charts for dark mode
    updateChartsTheme();
}

// Enhanced Chart initialization with real data
function initializeStatusPieChart() {
    const ctx = document.getElementById('statusPieChart').getContext('2d');
    const isDark = document.documentElement.classList.contains('dark');
    
    window.statusPieChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Open', 'Assigned', 'In Progress', 'Completed'],
            datasets: [{
                data: [{{ $openTickets }}, {{ $assignedTickets }}, {{ $inProgressTickets }}, {{ $completedTickets }}],
                backgroundColor: [
                    '#6B7280', // Gray for Open
                    '#EAB308', // Yellow for Assigned  
                    '#3B82F6', // Blue for In Progress
                    '#10B981'  // Green for Completed
                ],
                borderWidth: 2,
                borderColor: isDark ? '#1F2937' : '#ffffff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = ((context.parsed / total) * 100).toFixed(1);
                            return context.label + ': ' + context.parsed + ' (' + percentage + '%)';
                        }
                    }
                }
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    });
}

// Technician Workload Bar Chart
function initializeWorkloadBarChart() {
    const ctx = document.getElementById('workloadBarChart').getContext('2d');
    const isDark = document.documentElement.classList.contains('dark');
    
    window.workloadBarChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Mike J.', 'Sarah W.', 'John D.', 'Emma L.', 'David K.'],
            datasets: [{
                label: 'Active Tickets',
                data: [8, 12, 6, 9, 7],
                backgroundColor: [
                    'rgba(59, 130, 246, 0.8)',  // Blue
                    'rgba(16, 185, 129, 0.8)',  // Green  
                    'rgba(245, 158, 11, 0.8)',  // Yellow
                    'rgba(239, 68, 68, 0.8)',   // Red
                    'rgba(139, 92, 246, 0.8)'   // Purple
                ],
                borderColor: [
                    '#3B82F6',
                    '#10B981',
                    '#F59E0B',
                    '#EF4444',
                    '#8B5CF6'
                ],
                borderWidth: 2,
                borderRadius: 8,
                barThickness: 35,
                hoverBackgroundColor: [
                    'rgba(59, 130, 246, 1)',
                    'rgba(16, 185, 129, 1)',
                    'rgba(245, 158, 11, 1)',
                    'rgba(239, 68, 68, 1)',
                    'rgba(139, 92, 246, 1)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                duration: 2000,
                easing: 'easeOutBounce',
                delay: (context) => {
                    let delay = 0;
                    if (context.type === 'data' && context.mode === 'default') {
                        delay = context.dataIndex * 200;
                    }
                    return delay;
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    titleColor: '#ffffff',
                    bodyColor: '#ffffff',
                    borderColor: '#ffffff',
                    borderWidth: 1,
                    cornerRadius: 8,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return `🎫 ${context.parsed.y} tickets assigned`;
                        },
                        title: function(context) {
                            return `👤 ${context[0].label}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false,
                        color: isDark ? '#374151' : '#E5E7EB',
                        borderDash: [5, 5]
                    },
                    ticks: {
                        stepSize: 2,
                        color: isDark ? '#9CA3AF' : '#6B7280',
                        font: {
                            size: 11,
                            weight: '500'
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        color: isDark ? '#9CA3AF' : '#6B7280',
                        font: {
                            size: 11,
                            weight: '500'
                        }
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false
            },
            onHover: (event, activeElements) => {
                event.native.target.style.cursor = 'pointer';
            }
        }
    });
}

// Response Time Line Chart
function initializeResponseTimeChart() {
    const ctx = document.getElementById('responseTimeChart').getContext('2d');
    const isDark = document.documentElement.classList.contains('dark');
    
    window.responseTimeChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Response Time (hours)',
                data: [3.2, 2.8, 2.5, 2.9, 2.4, 2.1, 2.4],
                borderColor: '#10B981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                borderWidth: 4,
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#10B981',
                pointBorderColor: '#ffffff',
                pointBorderWidth: 3,
                pointRadius: 6,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: '#059669',
                pointHoverBorderColor: '#ffffff',
                pointHoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                duration: 2500,
                easing: 'easeInOutQuart'
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.9)',
                    titleColor: '#ffffff',
                    bodyColor: '#ffffff',
                    borderColor: '#10B981',
                    borderWidth: 2,
                    cornerRadius: 12,
                    displayColors: false,
                    callbacks: {
                        label: function(context) {
                            return `⏱️ ${context.parsed.y} hours response time`;
                        },
                        title: function(context) {
                            return `📅 ${context[0].label}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        display: true,
                        drawBorder: false,
                        color: isDark ? '#374151' : '#E5E7EB',
                        borderDash: [3, 3]
                    },
                    ticks: {
                        color: isDark ? '#9CA3AF' : '#6B7280',
                        font: {
                            size: 11,
                            weight: '500'
                        },
                        callback: function(value) {
                            return value + 'h';
                        }
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        color: isDark ? '#9CA3AF' : '#6B7280',
                        font: {
                            size: 11,
                            weight: '500'
                        }
                    }
                }
            },
            interaction: {
                mode: 'index',
                intersect: false
            },
            elements: {
                point: {
                    hoverRadius: 10
                }
            }
        }
    });
}

// Update charts theme
function updateChartsTheme() {
    const isDark = document.documentElement.classList.contains('dark');
    const gridColor = isDark ? '#374151' : '#E5E7EB';
    const textColor = isDark ? '#9CA3AF' : '#6B7280';
    const borderColor = isDark ? '#1F2937' : '#ffffff';
    
    // Update status pie chart
    if (window.statusPieChart) {
        window.statusPieChart.data.datasets[0].borderColor = borderColor;
        window.statusPieChart.update();
    }
    
    // Update workload bar chart
    if (window.workloadBarChart) {
        window.workloadBarChart.options.scales.y.grid.color = gridColor;
        window.workloadBarChart.options.scales.y.ticks.color = textColor;
        window.workloadBarChart.options.scales.x.ticks.color = textColor;
        window.workloadBarChart.update();
    }
    
    // Update response time chart
    if (window.responseTimeChart) {
        window.responseTimeChart.options.scales.y.grid.color = gridColor;
        window.responseTimeChart.options.scales.y.ticks.color = textColor;
        window.responseTimeChart.options.scales.x.ticks.color = textColor;
        window.responseTimeChart.update();
    }
}

// Refresh Status Chart
function refreshStatusChart() {
    const newData = [
        Math.floor(Math.random() * 20) + 10,
        Math.floor(Math.random() * 30) + 15,
        Math.floor(Math.random() * 20) + 8,
        Math.floor(Math.random() * 50) + 30
    ];
    
    window.statusPieChart.data.datasets[0].data = newData;
    window.statusPieChart.update();
    
    // Update legend values
    const legendValues = document.querySelectorAll('#statusPieChart').closest('.bg-white, .dark\\:bg-gray-800').querySelectorAll('.text-gray-600 strong, .dark\\:text-gray-400 strong');
    legendValues[0].textContent = newData[0];
    legendValues[1].textContent = newData[1];
    legendValues[2].textContent = newData[2];
    legendValues[3].textContent = newData[3];
    
    showNotification('Status chart refreshed', 'success');
}

// Update Workload Chart based on time period
function updateWorkloadChart(period) {
    let multiplier = 1;
    if (period === 'month') multiplier = 4;
    if (period === 'year') multiplier = 52;
    
    const newData = [
        Math.floor(Math.random() * 10 + 5) * multiplier,
        Math.floor(Math.random() * 15 + 8) * multiplier,
        Math.floor(Math.random() * 8 + 4) * multiplier,
        Math.floor(Math.random() * 12 + 6) * multiplier,
        Math.floor(Math.random() * 10 + 5) * multiplier
    ];
    
    window.workloadBarChart.data.datasets[0].data = newData;
    window.workloadBarChart.update();
}

// Enhanced Export functionality
function exportData(format) {
    showNotification(`Exporting data as ${format.toUpperCase()}...`, 'info');
    
    // Simulate export process
    setTimeout(() => {
        showNotification(`Successfully exported as ${format.toUpperCase()}`, 'success');
        
        // Trigger actual file download
        if (format === 'csv') {
            downloadCSV();
        } else if (format === 'excel') {
            downloadExcel();
        } else if (format === 'pdf') {
            downloadPDF();
        } else if (format === 'json') {
            downloadJSON();
        }
    }, 1500);
}

function downloadCSV() {
    const csvContent = `Ticket ID,Customer,Apartment,Priority,Status,Date,Created At\n` +
        `GAS-001,John Doe,Sunshine Apartments,High,Open,2026-02-13,2026-02-13 05:17:29\n` +
        `GAS-002,Jane Smith,Garden View,Medium,Assigned,2026-02-13,2026-02-13 05:20:48\n` +
        `GAS-003,Bob Johnson,Riverside Complex,Low,In Progress,2026-02-13,2026-02-13 05:21:29`;
    
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `dashboard_export_${new Date().toISOString().slice(0,10)}.csv`;
    a.click();
    window.URL.revokeObjectURL(url);
}

function downloadExcel() {
    // Create workbook with multiple sheets
    const wb = XLSX.utils.book_new();
    
    // Dashboard Summary Sheet
    const summaryData = [
        ['Dashboard Export', ''],
        ['Generated on', new Date().toLocaleString()],
        [],
        ['Metrics', 'Value'],
        ['Total Apartments', '{{ $totalApartments }}'],
        ['Total Tickets', '{{ $totalTickets }}'],
        ['Open Tickets', '{{ $openTickets }}'],
        ['Completed Tickets', '{{ $completedTickets }}'],
        ['Total Revenue', '₹{{ number_format($totalRevenue, 2) }}'],
        ['Resolution Rate', '{{ $resolutionRate }}%'],
        ['Avg Response Time', '{{ $avgResponseTime }}h']
    ];
    
    const wsSummary = XLSX.utils.aoa_to_sheet(summaryData);
    XLSX.utils.book_append_sheet(wb, wsSummary, 'Dashboard Summary');
    
    // Tickets Sheet
    const ticketsData = [
        ['Ticket ID', 'Customer', 'Apartment', 'Priority', 'Status', 'Date']
    ];
    
    // Add sample ticket data
    @forelse($recentTickets as $ticket)
        ticketsData.push([
            '{{ $ticket->ticket_id }}',
            '{{ $ticket->first_name }} {{ $ticket->last_name }}',
            '{{ $ticket->apartment->name ?? "N/A" }}',
            '{{ ucfirst($ticket->priority) }}',
            '{{ ucfirst(str_replace("_", " ", $ticket->status)) }}',
            '{{ $ticket->created_at->format("Y-m-d") }}'
        ]);
    @empty
        ticketsData.push(['No data available']);
    @endforelse
    
    const wsTickets = XLSX.utils.aoa_to_sheet(ticketsData);
    XLSX.utils.book_append_sheet(wb, wsTickets, 'Recent Tickets');
    
    // Payments Sheet
    const paymentsData = [
        ['Payment ID', 'Customer', 'Amount', 'Method', 'Status', 'Date']
    ];
    
    @forelse($recentPayments as $payment)
        paymentsData.push([
            '#{{ $payment->id }}',
            '{{ $payment->customer_name ?? "N/A" }}',
            '{{ $payment->amount }}',
            '{{ ucfirst($payment->payment_method) }}',
            '{{ ucfirst($payment->status) }}',
            '{{ $payment->created_at->format("Y-m-d") }}'
        ]);
    @empty
        paymentsData.push(['No data available']);
    @endforelse
    
    const wsPayments = XLSX.utils.aoa_to_sheet(paymentsData);
    XLSX.utils.book_append_sheet(wb, wsPayments, 'Recent Payments');
    
    // Save the file
    XLSX.writeFile(wb, `dashboard_export_${new Date().toISOString().slice(0,10)}.xlsx`);
}

function downloadPDF() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    
    // Add title
    doc.setFontSize(20);
    doc.text('Dashboard Report', 20, 20);
    
    // Add date
    doc.setFontSize(10);
    doc.text(`Generated on: ${new Date().toLocaleString()}`, 20, 30);
    
    // Add metrics table
    doc.setFontSize(14);
    doc.text('Key Metrics', 20, 45);
    
    const metrics = [
        ['Metric', 'Value'],
        ['Total Apartments', '{{ $totalApartments }}'],
        ['Total Tickets', '{{ $totalTickets }}'],
        ['Open Tickets', '{{ $openTickets }}'],
        ['Completed Tickets', '{{ $completedTickets }}'],
        ['Total Revenue', '₹{{ number_format($totalRevenue, 2) }}'],
        ['Resolution Rate', '{{ $resolutionRate }}%'],
        ['Avg Response Time', '{{ $avgResponseTime }}h']
    ];
    
    doc.autoTable({
        head: [metrics[0]],
        body: metrics.slice(1),
        startY: 50,
        theme: 'grid',
        styles: { fontSize: 10 }
    });
    
    // Save the PDF
    doc.save(`dashboard_export_${new Date().toISOString().slice(0,10)}.pdf`);
}

function downloadJSON() {
    const dashboardData = {
        exportDate: new Date().toISOString(),
        metrics: {
            totalApartments: {{ $totalApartments }},
            totalTickets: {{ $totalTickets }},
            openTickets: {{ $openTickets }},
            completedTickets: {{ $completedTickets }},
            totalRevenue: {{ $totalRevenue }},
            resolutionRate: {{ $resolutionRate }},
            avgResponseTime: {{ $avgResponseTime }}
        },
        recentTickets: [
            @forelse($recentTickets as $ticket)
                {
                    id: '{{ $ticket->ticket_id }}',
                    customer: '{{ $ticket->first_name }} {{ $ticket->last_name }}',
                    apartment: '{{ $ticket->apartment->name ?? "N/A" }}',
                    priority: '{{ $ticket->priority }}',
                    status: '{{ $ticket->status }}',
                    date: '{{ $ticket->created_at->format("Y-m-d") }}'
                },
            @empty
                { message: 'No tickets available' }
            @endforelse
        ],
        recentPayments: [
            @forelse($recentPayments as $payment)
                {
                    id: {{ $payment->id }},
                    customer: '{{ $payment->customer_name ?? "N/A" }}',
                    amount: {{ $payment->amount }},
                    method: '{{ $payment->payment_method }}',
                    status: '{{ $payment->status }}',
                    date: '{{ $payment->created_at->format("Y-m-d") }}'
                },
            @empty
                { message: 'No payments available' }
            @endforelse
        ]
    };
    
    const dataStr = JSON.stringify(dashboardData, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    const url = window.URL.createObjectURL(dataBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `dashboard_export_${new Date().toISOString().slice(0,10)}.json`;
    a.click();
    window.URL.revokeObjectURL(url);
}

// Enhanced Filter functionality
function applyFilters() {
    showNotification('Filters applied successfully', 'success');
    // In a real application, this would filter the table data via AJAX
    console.log('Filters applied:', {
        status: document.querySelector('[x-model*="filters.status"]').value,
        priority: document.querySelector('[x-model*="filters.priority"]').value,
        dateRange: document.querySelector('[x-model*="filters.dateRange"]').value
    });
}

function resetFilters() {
    // Reset all filter values
    const statusSelect = document.querySelector('[x-model*="filters.status"]');
    const prioritySelect = document.querySelector('[x-model*="filters.priority"]');
    const dateRangeSelect = document.querySelector('[x-model*="filters.dateRange"]');
    
    if (statusSelect) statusSelect.value = 'all';
    if (prioritySelect) prioritySelect.value = 'all';
    if (dateRangeSelect) dateRangeSelect.value = 'all';
    
    showNotification('Filters reset', 'info');
}

// Date range picker handler
function handleDateRangeChange(event) {
    const value = event.target.value;
    const dateRangePicker = document.querySelector('[x-ref="dateRangePicker"]');
    
    if (value === 'custom' && dateRangePicker) {
        // Initialize Flatpickr for custom date range
        flatpickr(dateRangePicker, {
            mode: 'range',
            dateFormat: 'Y-m-d',
            defaultDate: [
                new Date().setDate(new Date().getDate() - 7),
                new Date()
            ],
            onChange: function(selectedDates) {
                console.log('Custom date range selected:', selectedDates);
            }
        });
    }
}

// Refresh Activity Feed with real data
function refreshActivityFeed() {
    const feed = document.getElementById('activityFeed');
    const content = document.getElementById('activityFeedContent');
    
    feed.style.opacity = '0.5';
    
    fetch('/admin/api/recent-activity')
        .then(response => response.json())
        .then(activities => {
            content.innerHTML = '';
            
            if (activities.length === 0) {
                content.innerHTML = '<div class="text-center py-4 text-xs text-gray-500 dark:text-gray-400">No recent activity</div>';
            } else {
                activities.forEach(activity => {
                    const activityHtml = createActivityItem(activity);
                    content.insertAdjacentHTML('beforeend', activityHtml);
                });
            }
            
            feed.style.opacity = '1';
            showNotification('Activity feed refreshed', 'success');
        })
        .catch(error => {
            console.error('Error refreshing activity feed:', error);
            feed.style.opacity = '1';
            showNotification('Error refreshing activity feed', 'error');
        });
}

// Create activity item HTML
function createActivityItem(activity) {
    const colorClasses = {
        blue: 'from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 text-blue-600 dark:text-blue-300',
        green: 'from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 text-green-600 dark:text-green-300',
        yellow: 'from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 text-yellow-600 dark:text-yellow-300',
        orange: 'from-orange-100 to-orange-200 dark:from-orange-900 dark:to-orange-800 text-orange-600 dark:text-orange-300',
        red: 'from-red-100 to-red-200 dark:from-red-900 dark:to-red-800 text-red-600 dark:text-red-300'
    };

    const borderColors = {
        blue: 'hover:border-blue-500',
        green: 'hover:border-green-500',
        yellow: 'hover:border-yellow-500',
        orange: 'hover:border-orange-500',
        red: 'hover:border-red-500'
    };

    const priorityColors = {
        high: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
        medium: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
        low: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
    };

    const statusColors = {
        open: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
        assigned: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
        in_progress: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
        completed: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
        pending: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
        paid: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
    };

    let detailsHtml = '';
    
    if (activity.type === 'ticket') {
        detailsHtml = `
            <p class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">${activity.apartment}</p>
            <div class="mt-1 flex items-center space-x-1">
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${priorityColors[activity.priority]}">
                    <i class="fas fa-flag mr-1 text-xs"></i>${activity.priority.charAt(0).toUpperCase() + activity.priority.slice(1)}
                </span>
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${statusColors[activity.status]}">
                    <i class="fas fa-clock mr-1 text-xs"></i>${activity.status.replace('_', ' ').charAt(0).toUpperCase() + activity.status.slice(1)}
                </span>
            </div>
        `;
    } else if (activity.type === 'task') {
        detailsHtml = `
            <p class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">Technician: ${activity.technician}</p>
            <div class="mt-1 flex items-center space-x-1">
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${statusColors[activity.status]}">
                    <i class="fas fa-tasks mr-1 text-xs"></i>${activity.status.replace('_', ' ').charAt(0).toUpperCase() + activity.status.slice(1)}
                </span>
            </div>
        `;
    } else if (activity.type === 'payment') {
        detailsHtml = `
            <p class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">Technician: ${activity.technician} • Method: ${activity.method}</p>
            <div class="mt-1 flex items-center space-x-1">
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${statusColors[activity.status]}">
                    <i class="fas fa-rupee-sign mr-1 text-xs"></i>${activity.status.charAt(0).toUpperCase() + activity.status.slice(1)}
                </span>
            </div>
        `;
    }

    return `
        <div class="flex items-start space-x-2 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded transition-all duration-200 border-l-2 border-transparent ${borderColors[activity.color]}">
            <div class="flex-shrink-0 w-8 h-8 bg-gradient-to-br ${colorClasses[activity.color]} rounded-full flex items-center justify-center">
                <i class="${activity.icon} text-xs"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center justify-between">
                    <p class="text-xs text-gray-900 dark:text-gray-100">
                        <span class="font-medium">${activity.title}</span> ${activity.description}
                    </p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">${activity.created_at}</span>
                </div>
                ${detailsHtml}
            </div>
        </div>
    `;
}

// Enhanced Real-time updates with popup integration
let liveUpdateInterval;
let isMonitoringActive = true;

function startRealTimeUpdates() {
    if (liveUpdateInterval) clearInterval(liveUpdateInterval);
    
    liveUpdateInterval = setInterval(() => {
        if (isMonitoringActive) {
            updateMetrics();
            updateLivePopup();
            refreshActivityFeed();
        }
    }, 15000); // Update every 15 seconds for better responsiveness
    
    // Initial updates
    setTimeout(() => {
        updateMetrics();
        updateLivePopup();
        refreshActivityFeed();
    }, 1000);
}

// Update live popup with current status
function updateLivePopup() {
    const popup = document.querySelector('[x-data*="show: true"]');
    if (!popup) return;
    
    fetch('/admin/api/live-updates')
        .then(response => response.json())
        .then(updates => {
            try {
                if (popup._x_dataStack && popup._x_dataStack[0]) {
                    const data = popup._x_dataStack[0];
                    data.updateCount = updates.totalUpdates;
                    data.lastUpdate = new Date(updates.updatedTimestamp);
                }
            } catch (e) {
                // Fallback if Alpine is not available
                console.log('Live updates:', updates.totalUpdates, 'new items');
            }
        })
        .catch(error => {
            console.error('Error fetching live updates:', error);
        });
}

// Update performance metrics with real data
function updateMetrics() {
    fetch('/admin/api/dashboard-stats')
        .then(response => response.json())
        .then(stats => {
            // Update ticket counts
            updateMetricValue('openTickets', stats.openTickets);
            updateMetricValue('completedTickets', stats.completedTickets);
            updateMetricValue('totalRevenue', stats.totalRevenue, '₹');
            updateMetricValue('avgResponseTime', stats.avgResponseTime, '', 'h');
            
            // Update task counts
            updateMetricValue('completedTasks', stats.completedTasks);
            updateMetricValue('totalTasks', stats.totalTasks);
            
            // Update payment counts
            updateMetricValue('paidPayments', stats.paidPayments);
            updateMetricValue('pendingPayments', stats.pendingPayments);
            
            // Update technician counts
            updateMetricValue('freeTechnicians', stats.freeTechnicians);
            updateMetricValue('assignedTechnicians', stats.assignedTechnicians);
            
            // Update charts
            updateCharts(stats);
            
            // Show notification for significant changes
            checkForSignificantChanges(stats);
        })
        .catch(error => {
            console.error('Error updating metrics:', error);
        });
}

// Update individual metric value
function updateMetricValue(metricName, value, prefix = '', suffix = '') {
    const elements = document.querySelectorAll(`[data-metric="${metricName}"]`);
    elements.forEach(element => {
        const oldValue = parseFloat(element.textContent.replace(/[^0-9.-]/g, ''));
        const newValue = parseFloat(value);
        
        if (oldValue !== newValue) {
            // Animate the change
            element.style.transform = 'scale(1.1)';
            element.style.color = newValue > oldValue ? '#10B981' : '#EF4444';
            
            setTimeout(() => {
                element.textContent = prefix + (typeof value === 'number' && value % 1 !== 0 ? value.toFixed(1) : value) + suffix;
                element.style.transform = 'scale(1)';
                element.style.color = '';
            }, 300);
        }
    });
}

// Update charts with new data
function updateCharts(stats) {
    // Update status pie chart
    if (window.statusPieChart) {
        window.statusPieChart.data.datasets[0].data = [
            stats.openTickets,
            stats.assignedTickets,
            stats.inProgressTickets,
            stats.completedTickets
        ];
        window.statusPieChart.update('none'); // Update without animation for performance
    }
    
    // Update workload chart (simplified for now)
    if (window.workloadBarChart) {
        // This would need real technician data
        window.workloadBarChart.update('none');
    }
}

// Check for significant changes and show notifications
function checkForSignificantChanges(stats) {
    // Check for new high-priority tickets
    if (stats.openTickets > 5) {
        showNotification(`${stats.openTickets} tickets currently open`, 'warning');
    }
    
    // Check for completed tasks
    if (stats.completedTasks > 0) {
        showNotification(`${stats.completedTasks} tasks completed today`, 'success');
    }
    
    // Check for pending payments
    if (stats.pendingPayments > 0) {
        showNotification(`${stats.pendingPayments} payments pending`, 'info');
    }
}

// Toggle monitoring function
function toggleMonitoring() {
    isMonitoringActive = !isMonitoringActive;
    
    const popup = document.querySelector('[x-data*="show: true"]');
    if (popup) {
        try {
            const alpineData = Alpine.$data(popup);
            if (alpineData) {
                alpineData.connectionStatus = isMonitoringActive ? 'connected' : 'disconnected';
            }
        } catch (e) {
            console.log('Monitoring toggled:', isMonitoringActive);
        }
    }
    
    showNotification(
        isMonitoringActive ? 'Live monitoring resumed' : 'Live monitoring paused', 
        isMonitoringActive ? 'success' : 'info'
    );
}

// Update performance metrics
function updateMetrics() {
    const responseTime = (Math.random() * 2 + 1.5).toFixed(1);
    const resolutionRate = Math.floor(Math.random() * 10 + 88);
    
    // Update response time in performance metrics
    const responseTimeElements = document.querySelectorAll('.text-2xl.font-bold');
    responseTimeElements.forEach(el => {
        if (el.textContent.includes('.')) {
            el.textContent = responseTime;
        }
    });
}

// Show notification
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-[9999] px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full`;
    
    if (type === 'success') {
        notification.className += ' bg-green-500 text-white';
    } else if (type === 'error') {
        notification.className += ' bg-red-500 text-white';
    } else {
        notification.className += ' bg-blue-500 text-white';
    }
    
    notification.innerHTML = `
        <div class="flex items-center">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
            <span class="text-sm font-medium">${message}</span>
        </div>
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);
    
    setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Apartment Wise Report Export Functions
let apartments = [];

// Load apartments on page load
document.addEventListener('DOMContentLoaded', function() {
    loadApartments();
});

function loadApartments() {
    fetch('/admin/api/apartments')
        .then(response => response.json())
        .then(data => {
            apartments = data;
            populateApartmentDropdown();
        })
        .catch(error => {
            console.error('Error loading apartments:', error);
        });
}

function populateApartmentDropdown() {
    const select = document.getElementById('apartmentSelect');
    if (!select) return;
    
    // Clear existing options except the first one
    while (select.children.length > 1) {
        select.removeChild(select.lastChild);
    }
    
    // Add apartment options
    apartments.forEach(apartment => {
        const option = document.createElement('option');
        option.value = apartment.id;
        option.textContent = `${apartment.name} - ${apartment.location}`;
        select.appendChild(option);
    });
    
    // Add change event listener to load technicians
    select.addEventListener('change', function() {
        loadApartmentTechnicians(this.value);
    });
}

function showExportModal() {
    const modal = document.getElementById('exportModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    
    // Add animation
    setTimeout(() => {
        modal.querySelector('.bg-white, .dark\\:bg-gray-800').classList.add('scale-100');
    }, 10);
}

function closeExportModal() {
    const modal = document.getElementById('exportModal');
    modal.querySelector('.bg-white, .dark\\:bg-gray-800').classList.remove('scale-100');
    
    setTimeout(() => {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }, 200);
}

function exportReport(type) {
    closeExportModal();
    exportApartmentReport(type);
}

function loadApartmentTechnicians(apartmentId) {
    const previewDiv = document.getElementById('technicianPreview');
    const technicianList = document.getElementById('technicianList');
    
    if (!apartmentId) {
        previewDiv.classList.add('hidden');
        return;
    }
    
    // Show loading state
    technicianList.innerHTML = '<div class="text-xs text-blue-600 dark:text-blue-400"><i class="fas fa-spinner fa-spin mr-1"></i>Loading technicians...</div>';
    previewDiv.classList.remove('hidden');
    
    // Fetch technicians for this apartment
    const month = document.getElementById('monthSelect').value;
    const year = document.getElementById('yearSelect').value;
    
    const params = new URLSearchParams();
    params.append('apartment_id', apartmentId);
    if (month) params.append('month', month);
    if (year) params.append('year', year);
    
    fetch(`/admin/api/apartment-technicians?${params.toString()}`)
        .then(response => response.json())
        .then(data => {
            if (data.technicians && data.technicians.length > 0) {
                technicianList.innerHTML = data.technicians.map(tech => `
                    <div class="flex items-center justify-between p-2 bg-white dark:bg-gray-800 rounded border border-blue-100 dark:border-blue-800">
                        <div class="flex items-center space-x-2">
                            <div class="w-6 h-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                                <i class="fas fa-user text-blue-600 dark:text-blue-300 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-800 dark:text-gray-200">${tech.name}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">${tech.specialization || 'General'}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs text-gray-600 dark:text-gray-400">${tech.tickets_assigned} jobs</p>
                            <p class="text-xs text-green-600 dark:text-green-400">${tech.tickets_completed} done</p>
                        </div>
                    </div>
                `).join('');
            } else {
                technicianList.innerHTML = '<div class="text-xs text-gray-500 dark:text-gray-400"><i class="fas fa-info-circle mr-1"></i>No technicians assigned to this apartment</div>';
            }
        })
        .catch(error => {
            console.error('Error loading technicians:', error);
            technicianList.innerHTML = '<div class="text-xs text-red-600 dark:text-red-400"><i class="fas fa-exclamation-triangle mr-1"></i>Error loading technicians</div>';
        });
}

function exportApartmentReport(type) {
    const apartmentId = document.getElementById('apartmentSelect').value;
    const month = document.getElementById('monthSelect').value;
    const year = document.getElementById('yearSelect').value;
    
    // Update status
    const statusElement = document.getElementById('exportStatus');
    if (statusElement) {
        statusElement.textContent = 'Generating report...';
        statusElement.className = 'text-xs text-blue-600 dark:text-blue-400';
    }
    
    // Build URL with parameters
    const params = new URLSearchParams();
    if (apartmentId) params.append('apartment_id', apartmentId);
    if (month) params.append('month', month);
    if (year) params.append('year', year);
    
    const url = `/admin/reports/apartment-wise/export/${type}?${params.toString()}`;
    
    // Show loading state on buttons
    const buttons = document.querySelectorAll('button[onclick^="exportApartmentReport"]');
    buttons.forEach(btn => {
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>Processing...';
        
        setTimeout(() => {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }, 3000);
    });
    
    // Download the file
    window.location.href = url;
    
    // Update status after a delay
    setTimeout(() => {
        if (statusElement) {
            statusElement.textContent = 'Report downloaded successfully';
            statusElement.className = 'text-xs text-green-600 dark:text-green-400';
        }
        
        // Reset status after another delay
        setTimeout(() => {
            if (statusElement) {
                statusElement.textContent = 'Ready to export';
                statusElement.className = 'text-xs text-gray-500 dark:text-gray-400';
            }
        }, 3000);
    }, 2000);
    
    // Show notification
    const apartmentName = apartmentId ? 
        apartments.find(a => a.id == apartmentId)?.name || 'Selected Apartment' : 
        'All Apartments';
    const period = (month && year) ? 
        `${new Date(year, month - 1).toLocaleDateString('en-US', { month: 'long' })} ${year}` :
        year ? `${year}` : 'All Time';
    
    showNotification(`${type.toUpperCase()} report for ${apartmentName} - ${period} is being downloaded`, 'success');
}
</script>
@endsection