@php ($headerOption = [
    'title' => 'Welcome to Dashboard',
    'noCardView' => true
])
@extends('admin.layouts.layout', $headerOption)
@php($placeApiKey = \Config::get('settings.address_auto_populate_key'))
@push('page_css')
<link href="{{ asset('assets/css/dashboard.css') }}" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
@endpush


@section('content')
<div class="main_contentarea mt-2">
    <div class="container">
        <div class="dashboard_title">
            <h2>Welcome {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</h2>
        </div>
        
        @if($show_tenant_dropdown ?? false)
        <div class="tenant_selection_area mb-4">
            <div class="row align-items-end">
                <div class="col-md-4">
                    <label for="tenantSelect" class="form-label">Select Tenant</label>
                    <select id="tenantSelect" class="form-select">
                        <option value="">-- Select a tenant to view dashboard --</option>
                        @foreach($tenants as $tenant)
                        <option value="{{ $tenant->id }}">{{ $tenant->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <button id="refreshDashboard" class="btn btn-secondary" disabled>
                        <i class="fas fa-sync-alt me-2"></i>Refresh Dashboard
                    </button>
                </div>
            </div>
        </div>
        @endif
        <div class="dashboard_boxlist">
            <div class="dashboard_box">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/job.svg') }}" alt="Today's Completed Jobs"/>
                </div>
                <h4>Today's Jobs</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="todayJobs">{{ $stats['todayJobs'] ?? 0 }}</h3>
                    <a href="{{ route('admin.schedule.list') }}" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
            <div class="dashboard_box appoinmentbox">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/appoinment.svg') }}" alt="Incomplete Appointments"/>
                </div>
                <h4>Incomplete Appointments</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="incompleteAppointments">{{ $stats['incompleteAppointments'] ?? 0 }}</h3>
                    <a href="{{ route('admin.schedule.list') }}?status=incomplete" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
            <div class="dashboard_box inspectorbox">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/inspector.svg') }}" alt="Inspectors"/>
                </div>
                <h4>Inspectors</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="totalInspectors">{{ $stats['totalInspectors'] ?? 0 }}</h3>
                    <a href="{{ route('employees.index') }}" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
            <div class="dashboard_box agentbox">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/agents.svg') }}" alt="Agents"/>
                </div>
                <h4>Agents</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="totalAgents">{{ $stats['totalAgents'] ?? 0 }}</h3>
                    <a href="{{ route('agents.index') }}" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
            <div class="dashboard_box clientbox">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/clients.svg') }}" alt="Clients"/>
                </div>
                <h4>Clients</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="totalCustomers">{{ $stats['totalCustomers'] ?? 0 }}</h3>
                    <a href="{{ route('customers.index') }}" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
            <div class="dashboard_box leaderbox">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/leader.svg') }}" alt="Reports to Leader"/>
                </div>
                <h4>Total Submitted Reports to Leader</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="submittedReports">{{ $stats['submittedReports'] ?? 0 }}</h3>
                    <a href="{{ route('admin.schedule.list') }}?report_submitted=1" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
            <div class="dashboard_box reportbox">
                <div class="dashboard_boxcircel">
                    <img src="{{ asset('images/report.svg') }}" alt="Unpublished Reports"/>
                </div>
                <h4>Total Unpublished Reports</h4>
                <div class="d-flex justify-content-between align-items-center">
                    <h3 id="unpublishedReports">{{ $stats['unpublishedReports'] ?? 0 }}</h3>
                    <a href="{{ route('admin.schedule.list') }}?status=3&report_submitted=0" class="link_circle">
                        <img src="{{ asset('images/link_arrow.svg') }}" alt="Link"/>
                    </a>
                </div>
            </div>
        </div>

        <!-- Schedule Map Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Schedules Map</h5>
                        <div class="d-flex align-items-center gap-2">
                            @if($show_tenant_dropdown ?? false)
                            <select class="form-select form-select-sm" id="mapTenantFilter" style="width: auto;">
                                <option value="">All Tenants</option>
                                @foreach($tenants ?? [] as $tenant)
                                    <option value="{{ $tenant->id }}">{{ $tenant->name }}</option>
                                @endforeach
                            </select>
                            @endif
                            <div class="d-flex align-items-center gap-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="mapDatePeriod" id="mapToday" value="today" checked>
                                    <label class="form-check-label" for="mapToday">Today</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="mapDatePeriod" id="mapTomorrow" value="tomorrow">
                                    <label class="form-check-label" for="mapTomorrow">Tomorrow</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div id="scheduleMap" style="height: 500px; width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-lg-6 col-md-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Total Jobs</h3>
                        <div class="d-flex align-items-center gap-3">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="jobsPeriod" id="jobsByMonth" value="month" checked>
                                <label class="form-check-label" for="jobsByMonth">By Month</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="jobsPeriod" id="jobsBySixMonth" value="sixmonth">
                                <label class="form-check-label" for="jobsBySixMonth">By Six Month</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="jobsPeriod" id="jobsByYearly" value="yearly">
                                <label class="form-check-label" for="jobsByYearly">By Yearly</label>
                            </div>
                            <select class="form-select" id="jobsYearFilter" style="width: 100px;">
                                <option value="2025" selected>2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn" id="exportTotalJobsBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="totalJobsChart"></div>
                   </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Gross Income</h3>
                        <div class="d-flex align-items-center gap-3">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="incomePeriod" id="incomeByMonth" value="month" checked>
                                <label class="form-check-label" for="incomeByMonth">By Month</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="incomePeriod" id="incomeBySixMonth" value="sixmonth">
                                <label class="form-check-label" for="incomeBySixMonth">By Six Month</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="incomePeriod" id="incomeByYearly" value="yearly">
                                <label class="form-check-label" for="incomeByYearly">By Yearly</label>
                            </div>
                            <select class="form-select" id="incomeYearFilter" style="width: 100px;">
                                <option value="2025" selected>2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn" id="exportGrossIncomeBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="grossIncomeChart"></div>
                   </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Jobs Performed</h3>
                        <div class="d-flex align-items-center gap-2">
                            <label for="performedJobsFilter" class="form-label mb-0">Inspection By :</label>
                            <select class="form-select" id="performedJobsFilter" style="width: 120px;">
                                <option value="city" selected>City</option>
                                <option value="state">State</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn" id="exportJobsPerformedBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="custom-legend" id="jobsPerformedLegend"></div>
                   <div class="chart">
                        <div id="jobsPerformedChart"></div>
                   </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Upcoming Jobs</h3>
                        <div class="d-flex align-items-center gap-2">
                            <label for="upcomingJobsInspectorFilter" class="form-label mb-0">Inspector :</label>
                            <select class="form-select" id="upcomingJobsInspectorFilter" style="width: 150px;">
                                <option value="all" selected>All Inspector</option>
                                <option value="rajdip">Rajdip Pal</option>
                                <option value="steve">Steve Montalvo</option>
                                <option value="luis">Luis Barrera</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger ms-2 export-pdf-btn" id="exportUpcomingJobsBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="upcomingJobsChart"></div>
                   </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Job Types</h3>
                        <div class="d-flex align-items-center gap-2">
                            <label for="jobTypesYearFilter" class="form-label mb-0">Year :</label>
                            <select class="form-select" id="jobTypesYearFilter" style="width: 100px;">
                                <option value="2025" selected>2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn ms-2" id="exportJobTypesBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="job-types-search">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="jobTypesSearchFilter" placeholder="Search Service"/>
                            <span class="input-group-text clear-search" id="clearJobTypesSearch"><i class="fas fa-times"></i></span>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="jobTypesChart"></div>
                   </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Job By Agents</h3>
                        <div class="d-flex align-items-center gap-2">
                            <label for="jobAgentsYearFilter" class="form-label mb-0">Year :</label>
                            <select class="form-select" id="jobAgentsYearFilter" style="width: 100px;">
                                <option value="2025" selected>2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn ms-2" id="exportJobAgentsBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="job-agents-search">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="jobAgentsSearchFilter" placeholder="Search agent"/>
                            <span class="input-group-text clear-search" id="clearJobAgentsSearch"><i class="fas fa-times"></i></span>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="jobAgentsChart"></div>
                   </div>
                </div>
            </div>
        </div>

        <!-- Job By Inspector Section -->
        <div class="row mt-4">
            <div class="col-lg-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Job By Inspector</h3>
                        <div class="d-flex align-items-center gap-2">
                            <label for="jobInspectorYearFilter" class="form-label mb-0">Year :</label>
                            <select class="form-select" id="jobInspectorYearFilter" style="width: 100px;">
                                <option value="2025" selected>2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn ms-2" id="exportJobInspectorBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="job-inspector-search">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="jobInspectorSearchFilter" placeholder="Search inspector"/>
                            <span class="input-group-text clear-search" id="clearJobInspectorSearch"><i class="fas fa-times"></i></span>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="jobInspectorChart"></div>
                   </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="white_box mb-3">
                   <div class="whitebox_title">
                        <h3>Service Revenue</h3>
                        <div class="d-flex align-items-center gap-2">
                            <label for="serviceRevenueYearFilter" class="form-label mb-0">Year :</label>
                            <select class="form-select" id="serviceRevenueYearFilter" style="width: 100px;">
                                <option value="2025" selected>2025</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                            </select>
                            <button class="btn btn-sm btn-outline-danger export-pdf-btn ms-2" id="exportServiceRevenueBtn" title="Export to PDF">
                                <i class="fas fa-file-pdf me-1"></i>
                            </button>
                        </div>
                   </div>
                   <div class="service-revenue-search">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="serviceRevenueSearchFilter" placeholder="Search Service"/>
                            <span class="input-group-text clear-search" id="clearServiceRevenueSearch"><i class="fas fa-times"></i></span>
                        </div>
                   </div>
                   <div class="chart">
                        <div id="serviceRevenueChart"></div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
// Define initScheduleMap globally before Google Maps loads
window.initScheduleMap = function() {
    console.log('Initializing Schedule Map...');
    
    // Initialize the map
    if (typeof google === 'undefined') {
        console.error('Google Maps API not loaded');
        return;
    }
    
    // Initialize map centered on default location
    const mapOptions = {
        zoom: 10,
        center: { lat: 40.7128, lng: -74.0060 }, // Default to New York City
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
            {
                featureType: "poi",
                elementType: "labels",
                stylers: [{ visibility: "off" }]
            }
        ]
    };
    
    scheduleMap = new google.maps.Map(document.getElementById('scheduleMap'), mapOptions);
    mapInfoWindow = new google.maps.InfoWindow({
        disableAutoPan: false,
        pixelOffset: new google.maps.Size(0, -10)
    });
    
    // Load initial data
    loadScheduleMapData();
    
    // Add event listeners for date filter
    document.querySelectorAll('input[name="mapDatePeriod"]').forEach(radio => {
        radio.addEventListener('change', loadScheduleMapData);
    });
    
    @if($show_tenant_dropdown ?? false)
    document.getElementById('mapTenantFilter').addEventListener('change', loadScheduleMapData);
    @endif
    
    console.log('Schedule Map initialized successfully');
};

// Load Google Maps API with callback
(function() {
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.src = 'https://maps.googleapis.com/maps/api/js?key={{ $placeApiKey }}&callback=initScheduleMap&libraries=geometry';
    document.head.appendChild(script);
})();

// Dashboard Data Loading
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded');
    console.log('Show tenant dropdown:', {{ ($show_tenant_dropdown ?? false) ? 'true' : 'false' }});
    
    @if($show_tenant_dropdown ?? false)
    console.log('Running Super Admin functionality');
    // Super Admin functionality
    initializeSuperAdminFeatures();
    @else
    console.log('Running Regular user functionality');
    // Regular user functionality
    @endif
    
    // Initialize charts
    setTimeout(() => {
        initializeTotalJobsChart();
        initializeGrossIncomeChart(); // Re-enabled with dummy data but disabled appearance
        initializeJobsPerformedChart();
        initializeJobTypesChart();
        initializeUpcomingJobsChart();
        initializeJobAgentsChart();
        initializeJobInspectorChart();
        initializeServiceRevenueChart();
        
        // Initialize schedule map
        setTimeout(() => {
            if (typeof google !== 'undefined' && google.maps) {
                initScheduleMap();
            } else {
                // Fallback if Google Maps fails to load
                console.error('Google Maps API failed to load');
                document.getElementById('scheduleMap').innerHTML = '<div class="text-center p-4"><p class="text-muted">Map unavailable. Please check Google Maps API configuration.</p></div>';
            }
        }, 500);
    }, 100);
});

@if($show_tenant_dropdown ?? false)
function initializeSuperAdminFeatures() {
    console.log('Initializing Super Admin features...');
    const tenantSelect = document.getElementById('tenantSelect');
    const refreshBtn = document.getElementById('refreshDashboard');
    
    console.log('Tenant select element:', tenantSelect);
    console.log('Refresh button element:', refreshBtn);
    
    if (!tenantSelect || !refreshBtn) {
        console.error('Required elements not found!');
        return;
    }
    
    // Enable/disable refresh button based on tenant selection
    tenantSelect.addEventListener('change', function() {
        console.log('Tenant selection changed to:', this.value);
        const selectedTenant = this.value;
        refreshBtn.disabled = !selectedTenant;
        
        if (selectedTenant) {
            console.log('Enabling refresh button');
            refreshBtn.classList.remove('btn-secondary');
            refreshBtn.classList.add('btn-primary');
        } else {
            console.log('Disabling refresh button');
            refreshBtn.classList.remove('btn-primary');
            refreshBtn.classList.add('btn-secondary');
            // Clear dashboard when no tenant selected
            clearDashboardStats();
        }
    });
    
    // Handle refresh button click
    refreshBtn.addEventListener('click', function() {
        console.log('Refresh button clicked');
        const selectedTenant = tenantSelect.value;
        console.log('Selected tenant for refresh:', selectedTenant);
        if (!selectedTenant) {
            alert('Please select a tenant first');
            return;
        }
        
        refreshDashboardWithTenant(selectedTenant);
    });
}

function refreshDashboardWithTenant(tenantId) {
    console.log('Starting dashboard refresh for tenant:', tenantId);
    const refreshBtn = document.getElementById('refreshDashboard');
    
    // Update button to loading state
    if (refreshBtn) {
        refreshBtn.disabled = true;
        refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Loading...';
    }
    
    // Build URL with tenant parameter
    let url = '{{ route("admin.dashboard.stats") }}?tenant_id=' + encodeURIComponent(tenantId);
    console.log('Making AJAX call to:', url);
    
    // Make AJAX call to refresh stats
    fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            // Update the dashboard stats with animation
            updateStatWithAnimation('todayJobs', data.data.todayJobs || 0);
            updateStatWithAnimation('incompleteAppointments', data.data.incompleteAppointments || 0);
            updateStatWithAnimation('totalInspectors', data.data.totalInspectors || 0);
            updateStatWithAnimation('totalAgents', data.data.totalAgents || 0);
            updateStatWithAnimation('totalCustomers', data.data.totalCustomers || 0);
            updateStatWithAnimation('submittedReports', data.data.submittedReports || 0);
            updateStatWithAnimation('unpublishedReports', data.data.unpublishedReports || 0);
            
            // Refresh Total Jobs chart with new tenant data
            const period = document.querySelector('input[name="jobsPeriod"]:checked').value;
            const totalJobsYear = document.getElementById('jobsYearFilter').value;
            loadTotalJobsChartData(period, totalJobsYear);
            
            // Refresh Jobs Performed chart with new tenant data
            const filterType = document.getElementById('performedJobsFilter').value;
            loadJobsPerformedChartData(filterType);
            
            // Refresh Upcoming Jobs chart with new tenant data
            const inspectorFilter = document.getElementById('upcomingJobsInspectorFilter').value;
            loadUpcomingJobsChartData(inspectorFilter);
            
            // Refresh Job Types chart with new tenant data
            const jobTypesYear = document.getElementById('jobTypesYearFilter').value;
            const jobTypesSearchValue = document.getElementById('jobTypesSearchFilter').value;
            loadJobTypesChartData(jobTypesYear, jobTypesSearchValue);
            
            // Refresh Job By Agents chart with new tenant data
            const agentYear = document.getElementById('jobAgentsYearFilter').value;
            const agentSearchValue = document.getElementById('jobAgentsSearchFilter').value;
            loadJobAgentsChartData(agentYear, agentSearchValue);
            
            // Refresh Job By Inspector chart with new tenant data
            loadJobInspectorChartData();
            
            // Refresh Service Revenue chart with new tenant data
            const serviceRevenueYear = document.getElementById('serviceRevenueYearFilter').value;
            const serviceRevenueSearchValue = document.getElementById('serviceRevenueSearchFilter').value;
            loadServiceRevenueChartData(serviceRevenueYear, serviceRevenueSearchValue);
        } else {
            console.error('API returned error:', data.message);
            alert('Failed to refresh dashboard: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error refreshing dashboard stats:', error);
        alert('Error refreshing dashboard stats. Please try again.');
    })
    .finally(() => {
        // Reset button state
        if (refreshBtn) {
            refreshBtn.disabled = false;
            refreshBtn.innerHTML = '<i class="fas fa-sync-alt me-2"></i>Refresh Dashboard';
        }
    });
}

function clearDashboardStats() {
    // Set all stats to 0 when no tenant selected
    document.getElementById('todayJobs').textContent = '0';
    document.getElementById('incompleteAppointments').textContent = '0';
    document.getElementById('totalInspectors').textContent = '0';
    document.getElementById('totalAgents').textContent = '0';
    document.getElementById('totalCustomers').textContent = '0';
    document.getElementById('submittedReports').textContent = '0';
    document.getElementById('unpublishedReports').textContent = '0';
    
    // Clear Total Jobs chart data
    if (totalJobsChart) {
        const period = document.querySelector('input[name="jobsPeriod"]:checked').value;
        let emptyData = {
            categories: period === 'yearly' ? ['2021', '2022', '2023', '2024', '2025'] : 
                       period === 'sixmonth' ? [`Jan-${new Date().getFullYear()} To Jun-${new Date().getFullYear()}`, `Jul-${new Date().getFullYear()} To Dec-${new Date().getFullYear()}`] :
                       ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            data: period === 'yearly' ? [0, 0, 0, 0, 0] : 
                  period === 'sixmonth' ? [0, 0] : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        };
        updateTotalJobsChartDisplay(emptyData);
    }
    
    // Clear Jobs Performed chart data
    if (jobsPerformedChart) {
        updateJobsPerformedChartDisplay({
            labels: [],
            series: [],
            colors: []
        });
    }
    
    // Clear Upcoming Jobs chart data
    if (upcomingJobsChart) {
        updateUpcomingJobsChartDisplay({
            categories: [],
            data: [],
            inspectors: []
        });
        // Reset inspector dropdown to default
        const dropdown = document.getElementById('upcomingJobsInspectorFilter');
        if (dropdown) {
            dropdown.innerHTML = '<option value="all">All Inspector</option>';
        }
    }
    
    // Clear Job Types chart data
    if (jobTypesChart) {
        updateJobTypesChartDisplay({
            labels: [],
            data: [],
            service_names: []
        });
    }
    
    // Clear Job By Agents chart data
    if (jobAgentsChart) {
        updateJobAgentsChartDisplay({
            labels: [],
            data: [],
            filtered_by_agent: false
        });
    }
}

function updateStatWithAnimation(elementId, newValue) {
    const element = document.getElementById(elementId);
    if (!element) return;
    
    // Add subtle animation
    element.style.transition = 'all 0.3s ease';
    element.style.transform = 'scale(1.1)';
    element.style.color = '#007bff';
    
    // Update value
    setTimeout(() => {
        element.textContent = newValue;
    }, 150);
    
    // Reset animation
    setTimeout(() => {
        element.style.transform = 'scale(1)';
        element.style.color = '';
    }, 300);
}
@endif

// Schedule Map Implementation
let scheduleMap;
let mapMarkers = [];
let mapInfoWindow;

function loadScheduleMapData() {
    console.log('Loading schedule map data...');
    
    // Clear existing markers
    clearMapMarkers();
    
    // Build request parameters
    const params = new URLSearchParams();
    
    // Get selected date period
    const selectedDatePeriod = document.querySelector('input[name="mapDatePeriod"]:checked').value;
    if (selectedDatePeriod) {
        params.append('date_period', selectedDatePeriod);
    }
    
    @if($show_tenant_dropdown ?? false)
    const tenantFilter = document.getElementById('mapTenantFilter').value;
    if (tenantFilter) {
        params.append('tenant_id', tenantFilter);
    }
    @else
    // For regular users, use session tenant
    @if(session('tenant_id'))
    params.append('tenant_id', '{{ session('tenant_id') }}');
    @endif
    @endif
    
    // Make AJAX request to get schedule data
    fetch('{{ route("admin.dashboard.schedule-map-data") }}?' + params.toString(), {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log('Schedule map data received:', data);
        
        if (data.success && data.data) {
            displayScheduleMarkers(data.data);
            
            // Auto-fit map bounds if we have markers
            if (data.data.length > 0) {
                fitMapBounds();
            }
        } else {
            console.warn('No schedule data received or API error:', data.message);
        }
    })
    .catch(error => {
        console.error('Error loading schedule map data:', error);
    });
}

function displayScheduleMarkers(schedules) {
    console.log('Displaying', schedules.length, 'schedule markers');
    
    schedules.forEach((schedule, index) => {
        // Skip schedules without location data
        if (!schedule.latitude || !schedule.longitude) {
            console.warn('Schedule', schedule.id, 'missing coordinates');
            return;
        }
        
        const position = {
            lat: parseFloat(schedule.latitude),
            lng: parseFloat(schedule.longitude)
        };
        
        // Create custom marker icon - use default red pin
        const markerIcon = {
            url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
            scaledSize: new google.maps.Size(32, 32), // Larger size
            anchor: new google.maps.Point(16, 32) // Anchor point at bottom center
        };
        
        // Create marker
        const marker = new google.maps.Marker({
            position: position,
            map: scheduleMap,
            title: `Schedule #${schedule.id}`,
            icon: markerIcon,
            animation: google.maps.Animation.DROP,
            zIndex: index
        });
        
        // Create info window content
        const infoContent = createScheduleTooltip(schedule);
        
        // Add click event for info window
        marker.addListener('click', () => {
            mapInfoWindow.setContent(infoContent);
            mapInfoWindow.open(scheduleMap, marker);
            // Hide close button after InfoWindow opens
            setTimeout(() => hideInfoWindowCloseButton(), 100);
        });
        
        // Add mouseover event for quick tooltip
        marker.addListener('mouseover', () => {
            mapInfoWindow.setContent(infoContent);
            mapInfoWindow.open(scheduleMap, marker);
            // Hide close button after InfoWindow opens
            setTimeout(() => hideInfoWindowCloseButton(), 100);
        });
        
        // Add mouseout event to close tooltip after delay
        marker.addListener('mouseout', () => {
            setTimeout(() => {
                mapInfoWindow.close();
            }, 2000); // Close after 2 seconds
        });
        
        mapMarkers.push(marker);
    });
    
    console.log('Created', mapMarkers.length, 'markers on map');
}

function createScheduleTooltip(schedule) {
    const statusText = getScheduleStatusText(schedule.status);
    
    return `
        <div style="min-width: 250px; max-width: 300px; font-family: Arial, sans-serif;">
            <h6 style="margin-bottom: 10px; color: #333; font-size: 16px;">
                <i class="fas fa-calendar-alt"></i> ${schedule.appointment_id || 'No Appointment ID'}
            </h6>
            <div style="margin-bottom: 8px;">
                <strong>Date:</strong> ${schedule.scheduled_date || 'Not set'}
            </div>
            <div style="margin-bottom: 8px;">
                <strong>Time:</strong> ${schedule.start_time || 'Not set'}
            </div>
            ${schedule.property_address ? `
            <div style="margin-bottom: 8px;">
                <strong>Address:</strong><br>
                <small>${schedule.property_address}</small>
            </div>
            ` : ''}
            ${schedule.inspector_names && schedule.inspector_names !== 'Not assigned' ? `
            <div style="margin-bottom: 8px;">
                <strong>Inspector(s):</strong><br>
                <small>${schedule.inspector_names}</small>
            </div>
            ` : ''}
            ${schedule.customer_names && schedule.customer_names !== 'Not assigned' ? `
            <div style="margin-bottom: 8px;">
                <strong>Customer(s):</strong><br>
                <small>${schedule.customer_names}</small>
            </div>
            ` : ''}
            <div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid #eee;">
                <strong>Status:</strong> 
                <span style="color: #28a745; font-weight: bold;">${statusText}</span>
            </div>
        </div>
    `;
}

function getScheduleStatusText(status) {
    switch (parseInt(status)) {
        case 1: return 'Step 1 - Basic Info';
        case 2: return 'Step 2 - Participants';
        case 3: return 'Booked';
        case 4: return 'Available Slot';
        default: return 'Unknown';
    }
}

function getScheduleStatusColor(status) {
    switch (parseInt(status)) {
        case 1: return '#ffc107';
        case 2: return '#17a2b8';
        case 3: return '#28a745';
        case 4: return '#6c757d';
        default: return '#007bff';
    }
}

function clearMapMarkers() {
    mapMarkers.forEach(marker => {
        marker.setMap(null);
    });
    mapMarkers = [];
    
    if (mapInfoWindow) {
        mapInfoWindow.close();
    }
}

function hideInfoWindowCloseButton() {
    // Hide the close button on Google Maps InfoWindow
    const closeButtons = document.querySelectorAll('.gm-ui-hover-effect');
    closeButtons.forEach(button => {
        if (button.title === 'Close') {
            button.style.display = 'none';
        }
    });
    
    // Alternative method - hide by area tag
    const areaElements = document.querySelectorAll('area[title="Close"]');
    areaElements.forEach(area => {
        area.style.display = 'none';
        area.parentElement.style.display = 'none';
    });
}

function fitMapBounds() {
    if (mapMarkers.length === 0) return;
    
    const bounds = new google.maps.LatLngBounds();
    mapMarkers.forEach(marker => {
        bounds.extend(marker.getPosition());
    });
    
    scheduleMap.fitBounds(bounds);
    
    // Ensure minimum zoom level
    google.maps.event.addListenerOnce(scheduleMap, 'bounds_changed', () => {
        if (scheduleMap.getZoom() > 15) {
            scheduleMap.setZoom(15);
        }
    });
}

// Global callback function for Google Maps API
window.initScheduleMap = initScheduleMap;

// Total Jobs Chart Implementation
let totalJobsChart;
let currentTotalJobsData = null; // Store current chart data for export

function initializeTotalJobsChart() {
    loadTotalJobsChartData('month', '{{ date("Y") }}');
    
    // Add export button event listener
    document.getElementById('exportTotalJobsBtn').addEventListener('click', exportTotalJobsChartToPDF);
}

function loadTotalJobsChartData(period = 'month', year = '{{ date("Y") }}') {
    let url = '{{ route("admin.dashboard.chart-data") }}';
    const params = new URLSearchParams({
        period: period,
        year: year
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateTotalJobsChartDisplay(result.data);
            } else {
                console.error('Error loading chart data:', result.message);
                // Fallback to empty data
                updateTotalJobsChartDisplay({
                    categories: period === 'yearly' ? ['2021', '2022', '2023', '2024', '2025'] : 
                               period === 'sixmonth' ? [`Jan-${year} To Jun-${year}`, `Jul-${year} To Dec-${year}`] :
                               ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    data: period === 'yearly' ? [0, 0, 0, 0, 0] : 
                          period === 'sixmonth' ? [0, 0] : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                });
            }
        })
        .catch(error => {
            console.error('Error fetching chart data:', error);
            // Fallback to empty data
            updateTotalJobsChartDisplay({
                categories: period === 'yearly' ? ['2021', '2022', '2023', '2024', '2025'] : 
                           period === 'sixmonth' ? [`Jan-${year} To Jun-${year}`, `Jul-${year} To Dec-${year}`] :
                           ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: period === 'yearly' ? [0, 0, 0, 0, 0] : 
                      period === 'sixmonth' ? [0, 0] : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            });
        });
}

function updateTotalJobsChartDisplay(chartData) {
    // Store chart data for export
    currentTotalJobsData = chartData;
    
    const options = {
        series: [{
            name: 'Inspections',
            data: chartData.data,
            color: '#dc3545'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: chartData.categories,
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
            }
        },
        title: {
            text: '',
            floating: true,
            offsetY: 330,
            align: 'center',
            style: {
                color: '#444'
            }
        },
        grid: {
            borderColor: '#f1f1f1',
        }
    };

    if (totalJobsChart) {
        totalJobsChart.updateOptions({
            xaxis: {
                categories: chartData.categories
            },
            series: [{
                name: 'Inspections',
                data: chartData.data,
                color: '#dc3545'
            }]
        });
    } else {
        totalJobsChart = new ApexCharts(document.querySelector("#totalJobsChart"), options);
        totalJobsChart.render();
    }

    // Add event listeners for filters (only once)
    if (!document.querySelector('input[name="jobsPeriod"]').hasAttribute('data-listener-added')) {
        document.querySelectorAll('input[name="jobsPeriod"]').forEach(radio => {
            radio.addEventListener('change', updateTotalJobsChart);
            radio.setAttribute('data-listener-added', 'true');
        });

        const yearFilter = document.getElementById('jobsYearFilter');
        if (yearFilter) {
            yearFilter.addEventListener('change', updateTotalJobsChart);
            yearFilter.setAttribute('data-listener-added', 'true');
        }
    }
}

function updateTotalJobsChart() {
    const period = document.querySelector('input[name="jobsPeriod"]:checked').value;
    const year = document.getElementById('jobsYearFilter').value;

    // Show/hide year filter based on period
    const yearFilterContainer = document.getElementById('jobsYearFilter').parentElement;
    if (period === 'yearly') {
        yearFilterContainer.style.display = 'none';
    } else {
        yearFilterContainer.style.display = 'block';
    }

    // Load new data from backend
    loadTotalJobsChartData(period, year);
}

// Export Total Jobs Chart to PDF
function exportTotalJobsChartToPDF() {
    if (!currentTotalJobsData) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportTotalJobsBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('totalJobsChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Add title
        const period = document.querySelector('input[name="jobsPeriod"]:checked').value;
        const year = document.getElementById('jobsYearFilter').value;
        let periodText = period === 'month' ? 'Monthly' : period === 'sixmonth' ? '6 Months' : 'Yearly';
        
        pdf.setFontSize(16);
        pdf.text(`Total Jobs - ${periodText} (${year})`, 15, 15);
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text('Period', 20, yPosition);
        pdf.text('Jobs', 80, yPosition);
        yPosition += 5;
        
        // Draw table rows
        currentTotalJobsData.categories.forEach((category, index) => {
            const value = currentTotalJobsData.data[index];
            pdf.text(category, 20, yPosition);
            pdf.text(value.toString(), 80, yPosition);
            yPosition += 5;
            
            // Add new page if needed
            if (yPosition > 280) {
                pdf.addPage();
                yPosition = 15;
            }
        });
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.text(`Page ${i} of ${pageCount}`, 190, 287, { align: 'right' });
            pdf.text(`Generated on: ${new Date().toLocaleString()}`, 15, 287);
        }
        
        // Save PDF
        const fileName = `Total_Jobs_${periodText}_${year}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Gross Income Chart Implementation
let grossIncomeChart;
let currentGrossIncomeData = null; // Store current chart data for export

function initializeGrossIncomeChart() {
    loadGrossIncomeChartData('month', '{{ date("Y") }}');
    
    // Add export button event listener
    document.getElementById('exportGrossIncomeBtn').addEventListener('click', exportGrossIncomeChartToPDF);
}

function loadGrossIncomeChartData(period = 'month', year = '{{ date("Y") }}') {
    let url = '{{ route("admin.dashboard.gross-income-chart") }}';
    const params = new URLSearchParams({
        period: period,
        year: year
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateGrossIncomeChartDisplay(result.data);
            } else {
                console.error('API error:', result.message);
                // Fallback to empty data
                updateGrossIncomeChartDisplay({
                    categories: period === 'yearly' ? ['2021', '2022', '2023', '2024', '2025'] : 
                               period === 'sixmonth' ? ['Jan-Jun', 'Jul-Dec'] :
                               ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    data: period === 'yearly' ? [0, 0, 0, 0, 0] : 
                          period === 'sixmonth' ? [0, 0] :
                          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                });
            }
        })
        .catch(error => {
            console.error('Error fetching gross income chart data:', error);
            // Fallback to empty data
            updateGrossIncomeChartDisplay({
                categories: period === 'yearly' ? ['2021', '2022', '2023', '2024', '2025'] : 
                           period === 'sixmonth' ? ['Jan-Jun', 'Jul-Dec'] :
                           ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: period === 'yearly' ? [0, 0, 0, 0, 0] : 
                      period === 'sixmonth' ? [0, 0] :
                      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            });
        });
}

function updateGrossIncomeChartDisplay(chartData) {
    // Store chart data for export
    currentGrossIncomeData = chartData;
    
    const options = {
        series: [{
            name: 'Income',
            data: chartData.data,
            color: '#ffa726'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: chartData.categories,
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
                formatter: function (val) {
                    return '$' + val.toLocaleString();
                }
            }
        },
        title: {
            text: '',
            floating: true,
            offsetY: 330,
            align: 'center',
            style: {
                color: '#444',
                fontSize: '14px'
            }
        },
        grid: {
            borderColor: '#f1f1f1',
        }
    };

    if (grossIncomeChart) {
        grossIncomeChart.updateOptions({
            xaxis: {
                categories: chartData.categories
            },
            series: [{
                name: 'Income',
                data: chartData.data,
                color: '#ffa726'
            }]
        });
    } else {
        grossIncomeChart = new ApexCharts(document.querySelector("#grossIncomeChart"), options);
        grossIncomeChart.render();
    }

    // Add event listeners for filters (only once)
    if (!document.querySelector('input[name="incomePeriod"]').hasAttribute('data-listener-added')) {
        document.querySelectorAll('input[name="incomePeriod"]').forEach(radio => {
            radio.addEventListener('change', updateGrossIncomeChart);
            radio.setAttribute('data-listener-added', 'true');
        });

        const yearFilter = document.getElementById('incomeYearFilter');
        if (yearFilter) {
            yearFilter.addEventListener('change', updateGrossIncomeChart);
            yearFilter.setAttribute('data-listener-added', 'true');
        }
    }
}

function updateGrossIncomeChart() {
    const period = document.querySelector('input[name="incomePeriod"]:checked').value;
    const year = document.getElementById('incomeYearFilter').value;

    // Show/hide year filter based on period
    const yearFilterContainer = document.getElementById('incomeYearFilter').parentElement;
    if (period === 'yearly') {
        yearFilterContainer.style.display = 'none';
    } else {
        yearFilterContainer.style.display = 'block';
    }

    // Load new data from backend
    loadGrossIncomeChartData(period, year);
}

// Export Gross Income Chart to PDF
function exportGrossIncomeChartToPDF() {
    if (!currentGrossIncomeData) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportGrossIncomeBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('grossIncomeChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Add title
        const period = document.querySelector('input[name="incomePeriod"]:checked').value;
        const year = document.getElementById('incomeYearFilter').value;
        let periodText = period === 'month' ? 'Monthly' : period === 'sixmonth' ? '6 Months' : 'Yearly';
        
        pdf.setFontSize(16);
        pdf.text(`Gross Income - ${periodText} (${year})`, 15, 15);
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text('Period', 20, yPosition);
        pdf.text('Income', 80, yPosition);
        yPosition += 5;
        
        // Calculate total income
        let totalIncome = 0;
        
        // Draw table rows
        currentGrossIncomeData.categories.forEach((category, index) => {
            const value = currentGrossIncomeData.data[index];
            totalIncome += value;
            pdf.text(category, 20, yPosition);
            pdf.text('$' + value.toLocaleString(), 80, yPosition);
            yPosition += 5;
            
            // Add new page if needed
            if (yPosition > 280) {
                pdf.addPage();
                yPosition = 15;
            }
        });
        
        // Add total row
        yPosition += 3;
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total:', 20, yPosition);
        pdf.text('$' + totalIncome.toLocaleString(), 80, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.text(`Page ${i} of ${pageCount}`, 190, 287, { align: 'right' });
            pdf.text(`Generated on: ${new Date().toLocaleString()}`, 15, 287);
        }
        
        // Save PDF
        const fileName = `Gross_Income_${periodText}_${year}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Jobs Performed Chart Implementation
let jobsPerformedChart;
let currentJobsPerformedData = null; // Store current chart data for export

function initializeJobsPerformedChart() {
    loadJobsPerformedChartData('city');
    
    // Add export button event listener
    document.getElementById('exportJobsPerformedBtn').addEventListener('click', exportJobsPerformedChartToPDF);
}

function loadJobsPerformedChartData(type = 'city') {
    let url = '{{ route("admin.dashboard.jobs-performed-chart") }}';
    const params = new URLSearchParams({
        type: type
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateJobsPerformedChartDisplay(result.data);
            } else {
                console.error('Error loading jobs performed chart data:', result.message);
                // Fallback to empty data
                updateJobsPerformedChartDisplay({
                    labels: [],
                    series: [],
                    colors: []
                });
            }
        })
        .catch(error => {
            console.error('Error fetching jobs performed chart data:', error);
            // Fallback to empty data
            updateJobsPerformedChartDisplay({
                labels: [],
                series: [],
                colors: []
            });
        });
}

function updateJobsPerformedChartDisplay(chartData) {
    // Store chart data for export
    currentJobsPerformedData = chartData;
    
    const options = {
        series: chartData.series,
        chart: {
            width: 450,
            height: 350,
            type: 'pie',
        },
        labels: chartData.labels,
        colors: chartData.colors,
        legend: {
            show: false
        },
        dataLabels: {
            enabled: false
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " inspection" + (val !== 1 ? "s" : "");
                }
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 320
                }
            }
        }]
    };

    if (jobsPerformedChart) {
        jobsPerformedChart.updateOptions({
            series: chartData.series,
            labels: chartData.labels,
            colors: chartData.colors
        });
    } else {
        jobsPerformedChart = new ApexCharts(document.querySelector("#jobsPerformedChart"), options);
        jobsPerformedChart.render();
    }

    // Create custom legend
    createCustomLegend(chartData.labels, chartData.colors);

    // Add event listener for filter dropdown (only once)
    if (!document.getElementById('performedJobsFilter').hasAttribute('data-listener-added')) {
        document.getElementById('performedJobsFilter').addEventListener('change', updateJobsPerformedChart);
        document.getElementById('performedJobsFilter').setAttribute('data-listener-added', 'true');
    }
}

function updateJobsPerformedChart() {
    const filterType = document.getElementById('performedJobsFilter').value;
    console.log('Jobs Performed filter changed to:', filterType);
    
    // Load new data from backend
    loadJobsPerformedChartData(filterType);
}

function createCustomLegend(labels, colors) {
    const legendContainer = document.getElementById('jobsPerformedLegend');
    let legendHTML = '';
    
    labels.forEach((label, index) => {
        legendHTML += `
            <div class="legend-item">
                <div class="legend-color" style="background-color: ${colors[index]};"></div>
                <span class="legend-text">${label}</span>
            </div>
        `;
    });
    
    legendContainer.innerHTML = legendHTML;
}

// Export Jobs Performed Chart to PDF
function exportJobsPerformedChartToPDF() {
    if (!currentJobsPerformedData || !currentJobsPerformedData.labels || currentJobsPerformedData.labels.length === 0) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportJobsPerformedBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('jobsPerformedChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Add title
        const filterType = document.getElementById('performedJobsFilter').value;
        const filterText = filterType === 'city' ? 'City' : 'State';
        
        pdf.setFontSize(16);
        pdf.text(`Jobs Performed by ${filterText}`, 15, 15);
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text(filterText, 20, yPosition);
        pdf.text('Jobs', 120, yPosition);
        pdf.text('Percentage', 160, yPosition);
        yPosition += 5;
        
        // Calculate total jobs
        let totalJobs = 0;
        currentJobsPerformedData.series.forEach(value => {
            totalJobs += value;
        });
        
        // Draw table rows
        currentJobsPerformedData.labels.forEach((label, index) => {
            const value = currentJobsPerformedData.series[index];
            const percentage = totalJobs > 0 ? ((value / totalJobs) * 100).toFixed(1) : 0;
            
            // Add color box
            pdf.setFillColor(currentJobsPerformedData.colors[index]);
            pdf.rect(20, yPosition - 3, 4, 4, 'F');
            
            pdf.text(label, 26, yPosition);
            pdf.text(value.toString(), 120, yPosition);
            pdf.text(percentage + '%', 160, yPosition);
            yPosition += 6;
            
            // Add new page if needed
            if (yPosition > 280) {
                pdf.addPage();
                yPosition = 15;
            }
        });
        
        // Add total row
        yPosition += 3;
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total:', 20, yPosition);
        pdf.text(totalJobs.toString(), 120, yPosition);
        pdf.text('100%', 160, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.text(`Page ${i} of ${pageCount}`, 190, 287, { align: 'right' });
            pdf.text(`Generated on: ${new Date().toLocaleString()}`, 15, 287);
        }
        
        // Save PDF
        const fileName = `Jobs_Performed_by_${filterText}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Job by Services Chart Implementation
let jobTypesChart;
let allJobTypesData = [];
let filteredJobTypesData = [];
let currentJobTypesData = null; // Store current chart data for export

function initializeJobTypesChart() {
    const year = document.getElementById('jobTypesYearFilter').value;
    loadJobTypesChartData(year, '');
    
    // Add export button event listener
    document.getElementById('exportJobTypesBtn').addEventListener('click', exportJobTypesChartToPDF);
}

function loadJobTypesChartData(year = '{{ date("Y") }}', searchQuery = '') {
    let url = '{{ route("admin.dashboard.job-types-chart") }}';
    const params = new URLSearchParams({
        year: year,
        search: searchQuery
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateJobTypesChartDisplay(result.data);
            } else {
                console.error('Error loading job services chart data:', result.message);
                // Fallback to empty data
                updateJobTypesChartDisplay({
                    labels: [],
                    data: [],
                    service_names: []
                });
            }
        })
        .catch(error => {
            console.error('Error fetching job services chart data:', error);
            // Fallback to empty data
            updateJobTypesChartDisplay({
                labels: [],
                data: [],
                service_names: []
            });
        });
}

function updateJobTypesChartDisplay(chartData) {
    // Store chart data for export
    currentJobTypesData = chartData;
    
    allJobTypesData = chartData.labels.map((label, index) => ({
        name: label,
        value: chartData.data[index],
        color: '#10B981'
    }));
    
    filteredJobTypesData = [...allJobTypesData];

    // Update chart title based on search filter
    let chartTitle = `Jobs By Service (${chartData.year})`;
    if (chartData.search_query) {
        chartTitle = `Jobs By Service: ${chartData.search_query} (${chartData.year})`;
    }

    const options = {
        series: [{
            name: 'Inspections',
            data: filteredJobTypesData.map(item => item.value),
            color: '#10B981'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: false,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: filteredJobTypesData.map(item => item.name),
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    fontSize: '12px'
                }
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
            }
        },
        grid: {
            borderColor: '#f1f1f1',
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " inspection" + (val !== 1 ? "s" : "");
                }
            }
        },
        title: {
            text: chartTitle,
            align: 'center',
            style: {
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333'
            }
        }
    };

    if (jobTypesChart) {
        jobTypesChart.updateOptions({
            xaxis: {
                categories: filteredJobTypesData.map(item => item.name)
            },
            series: [{
                name: 'Inspections',
                data: filteredJobTypesData.map(item => item.value),
                color: '#10B981'
            }],
            title: {
                text: chartTitle
            }
        });
    } else {
        jobTypesChart = new ApexCharts(document.querySelector("#jobTypesChart"), options);
        jobTypesChart.render();
    }

    // Add event listeners (only once)
    if (!document.getElementById('jobTypesYearFilter').hasAttribute('data-listener-added')) {
        document.getElementById('jobTypesYearFilter').addEventListener('change', updateJobTypesChart);
        document.getElementById('jobTypesYearFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('jobTypesSearchFilter').addEventListener('input', filterJobTypes);
        document.getElementById('jobTypesSearchFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('clearJobTypesSearch').addEventListener('click', clearJobTypesSearch);
        document.getElementById('clearJobTypesSearch').setAttribute('data-listener-added', 'true');
    }
}

function updateJobTypesChart() {
    const year = document.getElementById('jobTypesYearFilter').value;
    const searchValue = document.getElementById('jobTypesSearchFilter').value;
    
    console.log('Job Services year filter changed to:', year);
    
    // Load new data from backend
    loadJobTypesChartData(year, searchValue);
}

function filterJobTypes() {
    const year = document.getElementById('jobTypesYearFilter').value;
    const searchValue = document.getElementById('jobTypesSearchFilter').value;
    
    // Load filtered data from backend
    loadJobTypesChartData(year, searchValue);
}

function clearJobTypesSearch() {
    document.getElementById('jobTypesSearchFilter').value = '';
    const year = document.getElementById('jobTypesYearFilter').value;
    
    // Load data without search filter
    loadJobTypesChartData(year, '');
}

// Export Job Types Chart to PDF
function exportJobTypesChartToPDF() {
    if (!currentJobTypesData || !currentJobTypesData.labels || currentJobTypesData.labels.length === 0) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportJobTypesBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('jobTypesChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Get filter values
        const year = document.getElementById('jobTypesYearFilter').value;
        const searchValue = document.getElementById('jobTypesSearchFilter').value;
        
        // Add title
        pdf.setFontSize(16);
        if (searchValue && currentJobTypesData.search_query) {
            pdf.text(`Jobs By Service: ${currentJobTypesData.search_query} (${year})`, 15, 15);
        } else {
            pdf.text(`Jobs By Service (${year})`, 15, 15);
        }
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text('Service', 20, yPosition);
        pdf.text('Jobs', 150, yPosition);
        yPosition += 5;
        
        // Calculate total jobs
        let totalJobs = 0;
        
        // Draw table rows
        currentJobTypesData.labels.forEach((label, index) => {
            const jobs = currentJobTypesData.data[index];
            totalJobs += jobs;
            
            // Truncate long service names
            const displayLabel = label.length > 45 ? label.substring(0, 42) + '...' : label;
            
            pdf.text(displayLabel, 20, yPosition);
            pdf.text(jobs.toString(), 150, yPosition);
            yPosition += 5;
            
            // Add new page if needed
            if (yPosition > 270) {
                pdf.addPage();
                yPosition = 20;
                
                // Re-add headers
                pdf.setFontSize(10);
                pdf.text('Service', 20, yPosition);
                pdf.text('Jobs', 150, yPosition);
                yPosition += 5;
            }
        });
        
        // Add total row
        yPosition += 3;
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total:', 20, yPosition);
        pdf.text(totalJobs.toString(), 150, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.text(`Page ${i} of ${pageCount}`, 15, 287);
            pdf.text(`Generated on ${new Date().toLocaleString()}`, 105, 287);
        }
        
        // Save PDF
        const fileNamePart = searchValue ? `_${searchValue.replace(/\s+/g, '_')}` : '';
        const fileName = `Jobs_By_Service${fileNamePart}_${year}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Upcoming Jobs Chart Implementation
let upcomingJobsChart;
let currentUpcomingJobsData = null; // Store current chart data for export

function initializeUpcomingJobsChart() {
    loadUpcomingJobsChartData('all');
    
    // Add export button event listener
    document.getElementById('exportUpcomingJobsBtn').addEventListener('click', exportUpcomingJobsChartToPDF);
}

function loadUpcomingJobsChartData(inspector = 'all') {
    let url = '{{ route("admin.dashboard.upcoming-jobs-chart") }}';
    const params = new URLSearchParams({
        inspector: inspector
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateUpcomingJobsChartDisplay(result.data);
                // Update inspector dropdown with real data
                updateInspectorDropdown(result.data.inspectors, inspector);
            } else {
                console.error('Error loading upcoming jobs chart data:', result.message);
                // Fallback to empty data
                updateUpcomingJobsChartDisplay({
                    categories: [],
                    data: [],
                    inspectors: []
                });
            }
        })
        .catch(error => {
            console.error('Error fetching upcoming jobs chart data:', error);
            // Fallback to empty data
            updateUpcomingJobsChartDisplay({
                categories: [],
                data: [],
                inspectors: []
            });
        });
}

function updateUpcomingJobsChartDisplay(chartData) {
    // Store chart data for export
    currentUpcomingJobsData = chartData;
    
    const options = {
        series: [{
            name: 'Inspections',
            data: chartData.data,
            color: '#3B82F6'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: chartData.categories,
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    fontSize: '12px'
                }
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
            }
        },
        grid: {
            borderColor: '#f1f1f1',
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " " + (val !== 1 ? "s" : "");
                }
            }
        }
    };

    if (upcomingJobsChart) {
        upcomingJobsChart.updateOptions({
            xaxis: {
                categories: chartData.categories
            },
            series: [{
                name: 'Inspections',
                data: chartData.data,
                color: '#3B82F6'
            }]
        });
    } else {
        upcomingJobsChart = new ApexCharts(document.querySelector("#upcomingJobsChart"), options);
        upcomingJobsChart.render();
    }

    // Add event listener for inspector filter (only once)
    if (!document.getElementById('upcomingJobsInspectorFilter').hasAttribute('data-listener-added')) {
        document.getElementById('upcomingJobsInspectorFilter').addEventListener('change', updateUpcomingJobsChart);
        document.getElementById('upcomingJobsInspectorFilter').setAttribute('data-listener-added', 'true');
    }
}

function updateInspectorDropdown(inspectors, selectedInspector) {
    const dropdown = document.getElementById('upcomingJobsInspectorFilter');
    if (!dropdown) return;

    // Store current selection
    const currentValue = selectedInspector || dropdown.value;
    
    // Clear existing options except "All Inspector"
    dropdown.innerHTML = '<option value="all">All Inspector</option>';
    
    // Add inspector options from real data
    inspectors.forEach(inspector => {
        const option = document.createElement('option');
        option.value = inspector.value;
        option.textContent = inspector.name;
        if (inspector.value === currentValue) {
            option.selected = true;
        }
        dropdown.appendChild(option);
    });
}

function updateUpcomingJobsChart() {
    const inspector = document.getElementById('upcomingJobsInspectorFilter').value;
    console.log('Upcoming Jobs inspector filter changed to:', inspector);
    
    // Load new data from backend
    loadUpcomingJobsChartData(inspector);
}

// Export Upcoming Jobs Chart to PDF
function exportUpcomingJobsChartToPDF() {
    if (!currentUpcomingJobsData || !currentUpcomingJobsData.categories || currentUpcomingJobsData.categories.length === 0) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportUpcomingJobsBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('upcomingJobsChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Get selected inspector
        const inspectorDropdown = document.getElementById('upcomingJobsInspectorFilter');
        const selectedInspectorText = inspectorDropdown.options[inspectorDropdown.selectedIndex].text;
        
        // Add title
        pdf.setFontSize(16);
        pdf.text(`Upcoming Jobs - ${selectedInspectorText}`, 15, 15);
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text('Date', 20, yPosition);
        pdf.text('Jobs', 120, yPosition);
        yPosition += 5;
        
        // Calculate total jobs
        let totalJobs = 0;
        
        // Draw table rows
        currentUpcomingJobsData.categories.forEach((category, index) => {
            const jobs = currentUpcomingJobsData.data[index];
            totalJobs += jobs;
            
            pdf.text(category, 20, yPosition);
            pdf.text(jobs.toString(), 120, yPosition);
            yPosition += 5;
            
            // Add new page if needed
            if (yPosition > 270) {
                pdf.addPage();
                yPosition = 20;
            }
        });
        
        // Add total row
        yPosition += 3;
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total:', 20, yPosition);
        pdf.text(totalJobs.toString(), 120, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.text(`Page ${i} of ${pageCount}`, 15, 287);
            pdf.text(`Generated on ${new Date().toLocaleString()}`, 105, 287);
        }
        
        // Save PDF
        const fileName = `Upcoming_Jobs_${selectedInspectorText.replace(/\s+/g, '_')}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Job By Agents Chart Implementation
let jobAgentsChart;
let allJobAgentsData = [];
let filteredJobAgentsData = [];
let currentJobAgentsData = null; // Store current chart data for export

function initializeJobAgentsChart() {
    const year = document.getElementById('jobAgentsYearFilter').value;
    loadJobAgentsChartData(year, '');
    
    // Add export button event listener
    document.getElementById('exportJobAgentsBtn').addEventListener('click', exportJobAgentsChartToPDF);
}

function loadJobAgentsChartData(year = '{{ date("Y") }}', searchQuery = '') {
    let url = '{{ route("admin.dashboard.job-by-agents-chart") }}';
    const params = new URLSearchParams({
        year: year,
        search: searchQuery
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateJobAgentsChartDisplay(result.data);
            } else {
                console.error('Error loading job agents chart data:', result.message);
                // Fallback to empty data
                updateJobAgentsChartDisplay({
                    labels: [],
                    data: [],
                    agent_names: []
                });
            }
        })
        .catch(error => {
            console.error('Error fetching job agents chart data:', error);
            // Fallback to empty data
            updateJobAgentsChartDisplay({
                labels: [],
                data: [],
                agent_names: []
            });
        });
}

function updateJobAgentsChartDisplay(chartData) {
    // Store chart data for export
    currentJobAgentsData = chartData;
    
    // Convert chart data to the expected format
    allJobAgentsData = chartData.labels.map((label, index) => ({
        name: label,
        value: chartData.data[index],
        color: '#10B981'
    }));
    
    filteredJobAgentsData = [...allJobAgentsData];

    // Update chart title based on search filter
    let chartTitle = '';
    if (chartData.filtered_by_agent && chartData.search_query) {
        chartTitle = `Jobs By Agent: ${chartData.search_query} (${chartData.year})`;
    } else {
        chartTitle = `Jobs By Month (${chartData.year})`;
    }

    const options = {
        series: [{
            name: 'Inspections',
            data: filteredJobAgentsData.map(item => item.value),
            color: '#10B981'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: false,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: filteredJobAgentsData.map(item => item.name),
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    fontSize: '12px'
                }
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
            }
        },
        grid: {
            borderColor: '#f1f1f1',
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " inspection" + (val !== 1 ? "s" : "");
                }
            }
        },
        title: {
            text: chartTitle,
            align: 'center',
            style: {
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333'
            }
        }
    };

    if (jobAgentsChart) {
        jobAgentsChart.updateOptions({
            xaxis: {
                categories: filteredJobAgentsData.map(item => item.name)
            },
            series: [{
                name: 'Inspections',
                data: filteredJobAgentsData.map(item => item.value),
                color: '#10B981'
            }],
            title: {
                text: chartTitle
            }
        });
    } else {
        jobAgentsChart = new ApexCharts(document.querySelector("#jobAgentsChart"), options);
        jobAgentsChart.render();
    }

    // Add event listeners (only once)
    if (!document.getElementById('jobAgentsYearFilter').hasAttribute('data-listener-added')) {
        document.getElementById('jobAgentsYearFilter').addEventListener('change', updateJobAgentsChart);
        document.getElementById('jobAgentsYearFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('jobAgentsSearchFilter').addEventListener('input', filterJobAgents);
        document.getElementById('jobAgentsSearchFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('clearJobAgentsSearch').addEventListener('click', clearJobAgentsSearch);
        document.getElementById('clearJobAgentsSearch').setAttribute('data-listener-added', 'true');
    }
}

function updateJobAgentsChart() {
    const year = document.getElementById('jobAgentsYearFilter').value;
    const searchValue = document.getElementById('jobAgentsSearchFilter').value;
    
    console.log('Job Agents year filter changed to:', year);
    
    // Load new data from backend
    loadJobAgentsChartData(year, searchValue);
}

function filterJobAgents() {
    const year = document.getElementById('jobAgentsYearFilter').value;
    const searchValue = document.getElementById('jobAgentsSearchFilter').value;
    
    // Load filtered data from backend
    loadJobAgentsChartData(year, searchValue);
}

function clearJobAgentsSearch() {
    document.getElementById('jobAgentsSearchFilter').value = '';
    const year = document.getElementById('jobAgentsYearFilter').value;
    
    // Load data without search filter
    loadJobAgentsChartData(year, '');
}

// Export Job By Agents Chart to PDF
function exportJobAgentsChartToPDF() {
    if (!currentJobAgentsData || !currentJobAgentsData.labels || currentJobAgentsData.labels.length === 0) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportJobAgentsBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('jobAgentsChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Get filter values
        const year = document.getElementById('jobAgentsYearFilter').value;
        const searchValue = document.getElementById('jobAgentsSearchFilter').value;
        
        // Add title
        pdf.setFontSize(16);
        if (currentJobAgentsData.filtered_by_agent && currentJobAgentsData.search_query) {
            pdf.text(`Jobs By Agent: ${currentJobAgentsData.search_query} (${year})`, 15, 15);
        } else {
            pdf.text(`Jobs By Month (${year})`, 15, 15);
        }
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        if (currentJobAgentsData.filtered_by_agent) {
            pdf.text('Month', 20, yPosition);
        } else {
            pdf.text('Month', 20, yPosition);
        }
        pdf.text('Jobs', 150, yPosition);
        yPosition += 5;
        
        // Calculate total jobs
        let totalJobs = 0;
        
        // Draw table rows
        currentJobAgentsData.labels.forEach((label, index) => {
            const jobs = currentJobAgentsData.data[index];
            totalJobs += jobs;
            
            // Truncate long names
            const displayLabel = label.length > 45 ? label.substring(0, 42) + '...' : label;
            
            pdf.text(displayLabel, 20, yPosition);
            pdf.text(jobs.toString(), 150, yPosition);
            yPosition += 5;
            
            // Add new page if needed
            if (yPosition > 270) {
                pdf.addPage();
                yPosition = 20;
                
                // Re-add headers
                pdf.setFontSize(10);
                if (currentJobAgentsData.filtered_by_agent) {
                    pdf.text('Month', 20, yPosition);
                } else {
                    pdf.text('Month', 20, yPosition);
                }
                pdf.text('Jobs', 150, yPosition);
                yPosition += 5;
            }
        });
        
        // Add total row
        yPosition += 3;
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total:', 20, yPosition);
        pdf.text(totalJobs.toString(), 150, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.text(`Page ${i} of ${pageCount}`, 15, 287);
            pdf.text(`Generated on ${new Date().toLocaleString()}`, 105, 287);
        }
        
        // Save PDF
        let fileNamePart = '';
        if (currentJobAgentsData.filtered_by_agent && searchValue) {
            fileNamePart = `_${searchValue.replace(/\s+/g, '_')}`;
        }
        const fileName = `Jobs_By_Agents${fileNamePart}_${year}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Job By Inspector Chart Implementation
let jobInspectorChart;
let allJobInspectorData = [];
let filteredJobInspectorData = [];
let currentJobInspectorData = null; // Store current chart data for export

function initializeJobInspectorChart() {
    // Load data from backend via AJAX
    loadJobInspectorChartData();
    
    // Add export button event listener
    document.getElementById('exportJobInspectorBtn').addEventListener('click', exportJobInspectorChartToPDF);
}

function loadJobInspectorChartData() {
    const year = document.getElementById('jobInspectorYearFilter').value || new Date().getFullYear();
    const searchQuery = document.getElementById('jobInspectorSearchFilter').value || '';
    
    // Get current tenant ID (for Super Admin)
    const tenantSelect = document.getElementById('tenantSelect');
    let url = '{{ route("admin.dashboard.job-by-inspector-chart") }}';
    
    const params = new URLSearchParams({
        year: year,
        search: searchQuery
    });
    
    // Add tenant ID if in Super Admin mode (when tenant select exists)
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }
    
    url += '?' + params.toString();
    
    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateJobInspectorChartDisplay(result.data);
            } else {
                console.error('Error loading job inspector chart data:', result.message);
                // Fallback to empty data
                updateJobInspectorChartDisplay({
                    labels: [],
                    data: [],
                    inspector_names: []
                });
            }
        })
        .catch(error => {
            console.error('Error fetching job inspector chart data:', error);
            // Fallback to empty data
            updateJobInspectorChartDisplay({
                labels: [],
                data: [],
                inspector_names: []
            });
        });
}

function updateJobInspectorChartDisplay(chartData) {
    // Store chart data for export
    currentJobInspectorData = chartData;
    
    // Convert chart data to the expected format
    allJobInspectorData = chartData.labels.map((label, index) => ({
        name: label,
        value: chartData.data[index],
        color: '#ff7f00'
    }));
    
    filteredJobInspectorData = [...allJobInspectorData];

    // Update chart title based on search filter
    let chartTitle = `Jobs By Inspector (${chartData.year})`;
    if (chartData.search_query) {
        chartTitle = `Jobs By Inspector: ${chartData.search_query} (${chartData.year})`;
    }

    const options = {
        series: [{
            name: 'Inspections',
            data: filteredJobInspectorData.map(item => item.value),
            color: '#ff7f00'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: false,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: filteredJobInspectorData.map(item => item.name),
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    fontSize: '12px'
                },
                rotate: -45
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
            }
        },
        grid: {
            borderColor: '#f1f1f1',
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " job" + (val !== 1 ? "s" : "");
                }
            }
        },
        title: {
            text: chartTitle,
            align: 'center',
            style: {
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333'
            }
        }
    };

    if (jobInspectorChart) {
        jobInspectorChart.updateOptions({
            xaxis: {
                categories: filteredJobInspectorData.map(item => item.name)
            },
            series: [{
                name: 'Inspections',
                data: filteredJobInspectorData.map(item => item.value),
                color: '#ff7f00'
            }],
            title: {
                text: chartTitle
            }
        });
    } else {
        jobInspectorChart = new ApexCharts(document.querySelector("#jobInspectorChart"), options);
        jobInspectorChart.render();
    }

    // Add event listeners (only once)
    if (!document.getElementById('jobInspectorYearFilter').hasAttribute('data-listener-added')) {
        document.getElementById('jobInspectorYearFilter').addEventListener('change', updateJobInspectorChart);
        document.getElementById('jobInspectorYearFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('jobInspectorSearchFilter').addEventListener('input', filterJobInspector);
        document.getElementById('jobInspectorSearchFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('clearJobInspectorSearch').addEventListener('click', clearJobInspectorSearch);
        document.getElementById('clearJobInspectorSearch').setAttribute('data-listener-added', 'true');
    }
}

function updateJobInspectorChart() {
    const year = document.getElementById('jobInspectorYearFilter').value;
    const searchValue = document.getElementById('jobInspectorSearchFilter').value;
    
    // Reload data from backend
    loadJobInspectorChartData();
}

function filterJobInspector() {
    const searchTerm = document.getElementById('jobInspectorSearchFilter').value.toLowerCase();
    filteredJobInspectorData = allJobInspectorData.filter(item => 
        item.name.toLowerCase().includes(searchTerm)
    );
    
    jobInspectorChart.updateOptions({
        xaxis: {
            categories: filteredJobInspectorData.map(item => item.name)
        },
        series: [{
            name: 'Inspections',
            data: filteredJobInspectorData.map(item => item.value),
            color: '#ff7f00'
        }],
        title: {
            text: `Jobs by Inspector${searchTerm ? ': ' + document.getElementById('jobInspectorSearchFilter').value : ''} (${document.getElementById('jobInspectorYearFilter').value})`
        }
    });
}

function clearJobInspectorSearch() {
    document.getElementById('jobInspectorSearchFilter').value = '';
    filteredJobInspectorData = [...allJobInspectorData];
    
    jobInspectorChart.updateOptions({
        xaxis: {
            categories: filteredJobInspectorData.map(item => item.name)
        },
        series: [{
            name: 'Inspections',
            data: filteredJobInspectorData.map(item => item.value),
            color: '#ff7f00'
        }],
        title: {
            text: `Jobs by Inspector (${document.getElementById('jobInspectorYearFilter').value})`
        }
    });
}

// Export Job By Inspector Chart to PDF
function exportJobInspectorChartToPDF() {
    if (!currentJobInspectorData || !currentJobInspectorData.labels || currentJobInspectorData.labels.length === 0) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportJobInspectorBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('jobInspectorChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Get filter values
        const year = document.getElementById('jobInspectorYearFilter').value;
        const searchValue = document.getElementById('jobInspectorSearchFilter').value;
        
        // Add title
        pdf.setFontSize(16);
        if (searchValue && currentJobInspectorData.search_query) {
            pdf.text(`Jobs By Inspector: ${currentJobInspectorData.search_query} (${year})`, 15, 15);
        } else {
            pdf.text(`Jobs By Inspector (${year})`, 15, 15);
        }
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 25, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 25 + imgHeight + 15;
        
        pdf.setFontSize(12);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text('Inspector', 20, yPosition);
        pdf.text('Jobs', 150, yPosition);
        yPosition += 5;
        
        // Calculate total jobs
        let totalJobs = 0;
        
        // Draw table rows
        currentJobInspectorData.labels.forEach((label, index) => {
            const jobs = currentJobInspectorData.data[index];
            totalJobs += jobs;
            
            // Truncate long inspector names
            const displayLabel = label.length > 45 ? label.substring(0, 42) + '...' : label;
            
            pdf.text(displayLabel, 20, yPosition);
            pdf.text(jobs.toString(), 150, yPosition);
            yPosition += 5;
            
            // Add new page if needed
            if (yPosition > 270) {
                pdf.addPage();
                yPosition = 20;
                
                // Re-add headers
                pdf.setFontSize(10);
                pdf.text('Inspector', 20, yPosition);
                pdf.text('Jobs', 150, yPosition);
                yPosition += 5;
            }
        });
        
        // Add total row
        yPosition += 3;
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total:', 20, yPosition);
        pdf.text(totalJobs.toString(), 150, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.text(`Page ${i} of ${pageCount}`, 15, 287);
            pdf.text(`Generated on ${new Date().toLocaleString()}`, 105, 287);
        }
        
        // Save PDF
        const fileNamePart = searchValue ? `_${searchValue.replace(/\s+/g, '_')}` : '';
        const fileName = `Jobs_By_Inspector${fileNamePart}_${year}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Service Revenue Chart Implementation
let serviceRevenueChart;
let allServiceRevenueData = [];
let filteredServiceRevenueData = [];
let currentServiceRevenueData = null; // Store current chart data for export

function initializeServiceRevenueChart() {
    // Load data from backend via AJAX
    const year = document.getElementById('serviceRevenueYearFilter').value;
    loadServiceRevenueChartData(year, '');
    
    // Add export button event listener
    document.getElementById('exportServiceRevenueBtn').addEventListener('click', exportServiceRevenueChartToPDF);
}

function loadServiceRevenueChartData(year = '{{ date("Y") }}', searchQuery = '') {
    let url = '{{ route("admin.dashboard.service-revenue-chart") }}';
    const params = new URLSearchParams({
        year: year,
        search: searchQuery
    });

    // Add tenant_id for Super Admin context
    const tenantSelect = document.getElementById('tenantSelect');
    if (tenantSelect && tenantSelect.value) {
        params.append('tenant_id', tenantSelect.value);
    }

    url += '?' + params.toString();

    fetch(url)
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                updateServiceRevenueChartDisplay(result.data);
            } else {
                console.error('Error loading service revenue chart data:', result.message);
                // Fallback to empty data
                updateServiceRevenueChartDisplay({
                    labels: [],
                    data: [],
                    service_details: []
                });
            }
        })
        .catch(error => {
            console.error('Error fetching service revenue chart data:', error);
            // Fallback to empty data
            updateServiceRevenueChartDisplay({
                labels: [],
                data: [],
                service_details: []
            });
        });
}

function updateServiceRevenueChartDisplay(chartData) {
    // Store chart data for export
    currentServiceRevenueData = chartData;
    
    // Generate colors for each service
    const colors = [
        '#007bff', '#ffc107', '#dc3545', '#28a745', '#17a2b8', '#6f42c1',
        '#fd7e14', '#e83e8c', '#20c997', '#6f42c1', '#fd6c6f', '#ffc658'
    ];

    // Convert chart data to the expected format
    allServiceRevenueData = chartData.labels.map((label, index) => ({
        name: label,
        value: chartData.data[index],
        color: colors[index % colors.length]
    }));
    
    filteredServiceRevenueData = [...allServiceRevenueData];

    // Update chart title based on search filter and total revenue
    const totalRevenue = chartData.total_revenue || 0;
    let chartTitle = `Service Revenue: $${totalRevenue.toLocaleString()} (${chartData.year})`;
    if (chartData.search_query) {
        chartTitle = `Service Revenue: ${chartData.search_query} - $${totalRevenue.toLocaleString()} (${chartData.year})`;
    }

    const options = {
        series: filteredServiceRevenueData.map(item => item.value),
        chart: {
            height: 350,
            type: 'pie',
        },
        labels: filteredServiceRevenueData.map(item => item.name),
        colors: filteredServiceRevenueData.map(item => item.color),
        legend: {
            position: 'bottom',
            horizontalAlign: 'center',
            fontSize: '12px',
            markers: {
                width: 12,
                height: 12
            }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return '$' + val.toLocaleString();
                }
            }
        },
        title: {
            text: chartTitle,
            align: 'center',
            style: {
                fontSize: '14px',
                fontWeight: 'bold',
                color: '#333'
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    height: 300
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };

    if (serviceRevenueChart) {
        serviceRevenueChart.updateOptions({
            series: filteredServiceRevenueData.map(item => item.value),
            labels: filteredServiceRevenueData.map(item => item.name),
            colors: filteredServiceRevenueData.map(item => item.color),
            title: {
                text: chartTitle
            }
        });
    } else {
        serviceRevenueChart = new ApexCharts(document.querySelector("#serviceRevenueChart"), options);
        serviceRevenueChart.render();
    }

    // Add event listeners (only once)
    if (!document.getElementById('serviceRevenueYearFilter').hasAttribute('data-listener-added')) {
        document.getElementById('serviceRevenueYearFilter').addEventListener('change', updateServiceRevenueChart);
        document.getElementById('serviceRevenueYearFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('serviceRevenueSearchFilter').addEventListener('input', filterServiceRevenue);
        document.getElementById('serviceRevenueSearchFilter').setAttribute('data-listener-added', 'true');

        document.getElementById('clearServiceRevenueSearch').addEventListener('click', clearServiceRevenueSearch);
        document.getElementById('clearServiceRevenueSearch').setAttribute('data-listener-added', 'true');
    }
}

function updateServiceRevenueChart() {
    const year = document.getElementById('serviceRevenueYearFilter').value;
    const searchValue = document.getElementById('serviceRevenueSearchFilter').value;
    
    // Load new data from backend
    loadServiceRevenueChartData(year, searchValue);
}

function filterServiceRevenue() {
    const year = document.getElementById('serviceRevenueYearFilter').value;
    const searchValue = document.getElementById('serviceRevenueSearchFilter').value;
    
    // Load filtered data from backend
    loadServiceRevenueChartData(year, searchValue);
}

function clearServiceRevenueSearch() {
    document.getElementById('serviceRevenueSearchFilter').value = '';
    const year = document.getElementById('serviceRevenueYearFilter').value;
    
    // Load data without search filter
    loadServiceRevenueChartData(year, '');
}

// Export Service Revenue Chart to PDF
function exportServiceRevenueChartToPDF() {
    if (!currentServiceRevenueData || !currentServiceRevenueData.labels || currentServiceRevenueData.labels.length === 0) {
        showNotification('warning', 'No chart data available to export', 'top', 'right');
        return;
    }
    
    const btn = document.getElementById('exportServiceRevenueBtn');
    const originalHTML = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Generating...';
    
    // Get chart container
    const chartElement = document.getElementById('serviceRevenueChart');
    
    html2canvas(chartElement, {
        scale: 2,
        backgroundColor: '#ffffff',
        logging: false
    }).then(canvas => {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');
        
        // Get filter values
        const year = document.getElementById('serviceRevenueYearFilter').value;
        const searchValue = document.getElementById('serviceRevenueSearchFilter').value;
        const totalRevenue = currentServiceRevenueData.total_revenue || 0;
        
        // Add title
        pdf.setFontSize(16);
        if (searchValue && currentServiceRevenueData.search_query) {
            pdf.text(`Service Revenue: ${currentServiceRevenueData.search_query} (${year})`, 15, 15);
        } else {
            pdf.text(`Service Revenue (${year})`, 15, 15);
        }
        
        // Add total revenue subtitle
        pdf.setFontSize(12);
        pdf.setTextColor(40, 40, 40);
        pdf.text(`Total Revenue: $${totalRevenue.toLocaleString()}`, 15, 23);
        
        // Add chart image
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 180;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        pdf.addImage(imgData, 'PNG', 15, 30, imgWidth, imgHeight);
        
        // Add data table
        let yPosition = 30 + imgHeight + 15;
        
        // Check if we need a new page
        if (yPosition > 250) {
            pdf.addPage();
            yPosition = 20;
        }
        
        pdf.setFontSize(12);
        pdf.setTextColor(0, 0, 0);
        pdf.text('Chart Data:', 15, yPosition);
        yPosition += 7;
        
        pdf.setFontSize(10);
        pdf.text('Service', 20, yPosition);
        pdf.text('Revenue', 150, yPosition);
        yPosition += 5;
        
        // Calculate total revenue
        let calculatedTotal = 0;
        
        // Draw table rows
        currentServiceRevenueData.labels.forEach((label, index) => {
            const value = currentServiceRevenueData.data[index];
            calculatedTotal += value;
            
            // Check if we need a new page
            if (yPosition > 270) {
                pdf.addPage();
                yPosition = 20;
                
                // Re-add table header
                pdf.setFontSize(10);
                pdf.text('Service', 20, yPosition);
                pdf.text('Revenue', 150, yPosition);
                yPosition += 5;
            }
            
            // Truncate long service names
            const truncatedLabel = label.length > 45 ? label.substring(0, 45) + '...' : label;
            
            pdf.text(truncatedLabel, 20, yPosition);
            pdf.text('$' + value.toLocaleString(), 150, yPosition);
            yPosition += 5;
        });
        
        // Add total row
        yPosition += 3;
        
        // Check if we need a new page for total
        if (yPosition > 270) {
            pdf.addPage();
            yPosition = 20;
        }
        
        pdf.setFontSize(11);
        pdf.setFont(undefined, 'bold');
        pdf.text('Total Revenue:', 20, yPosition);
        pdf.text('$' + calculatedTotal.toLocaleString(), 150, yPosition);
        
        // Add footer
        const pageCount = pdf.internal.getNumberOfPages();
        for (let i = 1; i <= pageCount; i++) {
            pdf.setPage(i);
            pdf.setFontSize(8);
            pdf.setFont(undefined, 'normal');
            pdf.setTextColor(128, 128, 128);
            pdf.text(`Page ${i} of ${pageCount}`, 105, 290, { align: 'center' });
            pdf.text(`Generated on ${new Date().toLocaleString()}`, 15, 290);
        }
        
        // Save PDF
        const fileNamePart = searchValue ? `_${searchValue.replace(/\s+/g, '_')}` : '';
        const fileName = `Service_Revenue${fileNamePart}_${year}_${new Date().getTime()}.pdf`;
        pdf.save(fileName);
        
        // Reset button
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    }).catch(error => {
        console.error('Error generating PDF:', error);
        showNotification('error', 'Error generating PDF. Please try again.', 'top', 'right');
        btn.disabled = false;
        btn.innerHTML = originalHTML;
    });
}

// Buyers Agents Chart Implementation - DUMMY DATA (Not Fully Implemented)
let buyersAgentsChart;
let allBuyersAgentsData = [
    { name: 'Roger Valdez', value: 28 },
    { name: 'Abraham Deleon', value: 25 },
    { name: 'Brendan Wells', value: 18 },
    { name: 'Jasmine Mendoza', value: 17 },
    { name: 'James Huron', value: 13 }
];
let filteredBuyersAgentsData = [...allBuyersAgentsData];

function initializeBuyersAgentsChart() {
    // Dummy/sample data for visual purposes
    const chartData = {
        2025: [
            { name: 'Roger Valdez', value: 28 },
            { name: 'Abraham Deleon', value: 25 },
            { name: 'Brendan Wells', value: 18 },
            { name: 'Jasmine Mendoza', value: 17 },
            { name: 'James Huron', value: 13 }
        ],
        2024: [
            { name: 'Roger Valdez', value: 26 },
            { name: 'Abraham Deleon', value: 23 },
            { name: 'Brendan Wells', value: 16 },
            { name: 'Jasmine Mendoza', value: 15 },
            { name: 'James Huron', value: 11 }
        ],
        2023: [
            { name: 'Roger Valdez', value: 24 },
            { name: 'Abraham Deleon', value: 21 },
            { name: 'Brendan Wells', value: 14 },
            { name: 'Jasmine Mendoza', value: 13 },
            { name: 'James Huron', value: 9 }
        ],
        2022: [
            { name: 'Roger Valdez', value: 22 },
            { name: 'Abraham Deleon', value: 19 },
            { name: 'Brendan Wells', value: 12 },
            { name: 'Jasmine Mendoza', value: 11 },
            { name: 'James Huron', value: 7 }
        ],
        2021: [
            { name: 'Roger Valdez', value: 20 },
            { name: 'Abraham Deleon', value: 17 },
            { name: 'Brendan Wells', value: 10 },
            { name: 'Jasmine Mendoza', value: 9 },
            { name: 'James Huron', value: 5 }
        ]
    };

    const currentYear = document.getElementById('buyersAgentsYearFilter').value;
    allBuyersAgentsData = chartData[currentYear] || chartData[2025];
    filteredBuyersAgentsData = [...allBuyersAgentsData];

    const options = {
        series: [{
            name: 'Inspections (Sample Data)',
            data: filteredBuyersAgentsData.map(item => item.value),
            color: '#007bff'
        }],
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false
            }
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: false,
                dataLabels: {
                    position: 'top',
                },
            }
        },
        dataLabels: {
            enabled: false,
        },
        xaxis: {
            categories: filteredBuyersAgentsData.map(item => item.name),
            position: 'bottom',
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    fontSize: '12px',
                    colors: '#999' // Gray out labels to show it's disabled
                },
                rotate: -45
            }
        },
        yaxis: {
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
                style: {
                    colors: '#999' // Gray out labels to show it's disabled
                }
            }
        },
        grid: {
            borderColor: '#e5e5e5', // Lighter grid for disabled look
        },
        tooltip: {
            enabled: false // Disable tooltip for disabled chart
        },
        title: {
            text: 'Sample Data Only',
            floating: true,
            offsetY: 330,
            align: 'center',
            style: {
                color: '#999',
                fontSize: '12px'
            }
        }
    };

    buyersAgentsChart = new ApexCharts(document.querySelector("#buyersAgentsChart"), options);
    buyersAgentsChart.render();

    // Note: Event listeners are disabled since the chart is not interactive
    console.log('Buyers Agents chart initialized with sample data (disabled functionality)');
}

function updateBuyersAgentsChart() {
    // This function is disabled since the chart is not fully implemented
    console.log('Buyers Agents chart update disabled - sample data only');
}

function filterBuyersAgents() {
    // This function is disabled since the chart is not fully implemented
    console.log('Buyers Agents chart filter disabled - sample data only');
}

function clearBuyersAgentsSearch() {
    // This function is disabled since the chart is not fully implemented
    console.log('Buyers Agents chart search clear disabled - sample data only');
}

function refreshDashboardStats() {
    // Show loading state
    const refreshBtn = document.querySelector('.dashboard_title button');
    if (refreshBtn) {
        refreshBtn.disabled = true;
        refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
    }
    
    // Make AJAX call to refresh stats
    fetch('{{ route("admin.dashboard.stats") }}', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update the dashboard stats
            document.getElementById('todayJobs').textContent = data.data.todayJobs || '0';
            document.getElementById('incompleteAppointments').textContent = data.data.incompleteAppointments || '0';
            document.getElementById('totalInspectors').textContent = data.data.totalInspectors || '0';
            document.getElementById('totalAgents').textContent = data.data.totalAgents || '0';
            document.getElementById('totalCustomers').textContent = data.data.totalCustomers || '0';
            document.getElementById('submittedReports').textContent = data.data.submittedReports || '0';
            document.getElementById('unpublishedReports').textContent = data.data.unpublishedReports || '0';
        }
    })
    .catch(error => {
        console.error('Error refreshing dashboard stats:', error);
    })
    .finally(() => {
        // Reset button state
        if (refreshBtn) {
            refreshBtn.disabled = false;
            refreshBtn.innerHTML = '<i class="fas fa-sync-alt"></i> Refresh';
        }
    });
}
</script>

<style>
/* Fix radio button and label alignment */
.form-check-inline {
    display: inline-flex !important;
    align-items: center !important;
}

.form-check-inline .form-check-input {
    margin-top: 0 !important;
    margin-right: 0.5rem !important;
}

.form-check-inline .form-check-label {
    margin-bottom: 0 !important;
    line-height: 1 !important;
}

/* Ensure consistent spacing and alignment for dashboard radio groups */
.d-flex .form-check-inline {
    margin-right: 1rem;
}

/* Hide Google Maps InfoWindow close button */
.gm-ui-hover-effect[title="Close"] {
    display: none !important;
}

.gm-style .gm-style-iw-c button[title="Close"] {
    display: none !important;
}

.gm-style .gm-style-iw button {
    display: none !important;
}

/* Modern Export PDF Button Styling */
.export-pdf-btn {
    font-weight: 500;
    border-width: 1.5px;
    border-color: #7F1C1C;
    color: #7F1C1C;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(127, 28, 28, 0.1);
}

.export-pdf-btn:hover {
    background-color: #7F1C1C;
    border-color: #7F1C1C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(127, 28, 28, 0.25);
}

.export-pdf-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(127, 28, 28, 0.2);
}

.export-pdf-btn i {
    font-size: 0.9rem;
}
</style>
@endpush
@endsection