@php
    $tabs = [
        ['id' => 'patient_safety_incidents', 'label' => 'Patient Safety Incidents'],
        ['id' => 'controlled_drug_management', 'label' => 'Controlled Drug Management'],
        ['id' => 'central_fulfillment', 'label' => 'Central Fulfillment'],
        ['id' => 'freedom_to_speak_up', 'label' => 'Freedom To Speak Up'],
        ['id' => 'pharmacy_premises_inspection', 'label' => 'Pharmacy Premises Inspection'],
        ['id' => 'nhs_and_iG', 'label' => 'NHS and IG'],
        ['id' => 'Field_Managers', 'label' => 'Field Managers'],
        ['id' => 'monthly_board_report', 'label' => 'Board Report'],
        ['id' => 'customer_satisfaction_score', 'label' => 'Customer Experience'],
        ['id' => 'operations_report', 'label' => 'Operations Report'],
        ['id' => 'MDSCF', 'label' => 'MDSCF'],
        ['id' => 'patient_safety_report_compliance_dashboard', 'label' => 'Patient Safety Report Compliance Dashboard']

    ];
@endphp


@extends('layouts.head_office_app')
@section('title', 'Dashboard')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('admin_assets/tree_select/treeselect.css') }}" rel="stylesheet" />
@section('styles')
    <link rel="stylesheet" href="{{ asset('css/alertify.min.css') }}">
    <style>
        .nav-item a.active {
            font-weight: 600;
            color: var(--highlight-company-subnav-color) !important;
        }

        .nav-item a.active span {
            color: var(--highlight-company-subnav-color) !important;
        }

        #sidebar {
            width: 220px;
            max-width: 220px;
            height: 100vh;
            color: white;
            padding: 15px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            position: sticky;
            top: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #sidebar::-webkit-scrollbar {
            width: 6px;
        }

        #sidebar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        #sidebar::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        #sidebar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .nav {
            list-style: none;
            padding: 0;
            width: 100%;
            margin: 0;
            flex: 1;
        }

        .nav-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            margin-bottom: 5px;
        }

        .nav-text {
            color: black;
            flex: 1;
            text-align: left;
            font-size: 100%;
        }

        .nav-badge {
            margin-left: 10%;
        }

        .nav-item a {
            position: relative;
            color: rgb(0, 0, 0);
            text-decoration: none;
            padding: 10px 12px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: block;
            width: 100%;
            font-size: 14px;
            line-height: 1.4;
        }

        .nav-item a:hover {
            background-color: rgba(0, 0, 0, 0.05);
            transform: translateX(2px);
        }

        .nav-item a.active {
            color: var(--portal-section-heading-color);
            padding-left: 9px;
        }

        .chart-card {
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .chart-card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
        }

        .chart-header {
            padding: 12px 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        }

        .chart-title {
            font-weight: 600;
            color: #333;
        }

        .chart-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .chart-total {
            font-size: 0.875rem;
            color: #6c757d;
            display: flex;
            align-items: center;
        }

        .chart-total i {
            color: #010101;
        }

        .chart-actions .btn {
            margin-left: 5px;
            border-radius: 4px;
        }

        .chart-body {
            padding: 15px;
            min-height: 250px;
        }

        .chart-options {
            background-color: #f8f9fa;
            padding: 12px 15px;
            border-top: 1px solid rgba(0, 0, 0, 0.125);
        }

        .period-label {
            margin-bottom: 5px;
        }

        .period-option {
            margin-right: 10px;
        }

        .custom-date-inputs {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        @media (max-width: 767.98px) {
            .col-md-6, .col-md-12 {
                margin-bottom: 20px;
            }
        }

        .header-container {
            width: 100%;
            max-width: 100%;
            margin: 20px 0;
            display: flex;
            justify-content: left;
        }

        .near-miss-header {
            background: linear-gradient(135deg, #00fcef 0%, #00d6c9 100%);
            border: 2px solid #1a1a1a;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 12px 28px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .near-miss-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
            z-index: 1;
        }

        .header-title {
            font-family: 'Arial', sans-serif;
            color: #1a1a1a;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1px;
            margin: 0;
            text-transform: uppercase;
            position: relative;
            z-index: 2;
        }
    </style>
@endsection

@section('content')
<style>
    /* Enhanced loading states */
    .spinner-border {
        border-width: 0.3em;
        animation: spinner-border 0.75s linear infinite;
    }
    
    @keyframes spinner-border {
        to {
            transform: rotate(360deg);
        }
    }
    
    .loading-state {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 8px;
        padding: 2rem;
    }
    
    .error-state {
        background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
        border-radius: 8px;
        padding: 2rem;
    }
    
    .no-data-state {
        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
        border-radius: 8px;
        padding: 2rem;
    }
    
    .loading-pulse {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    /* Custom rotating spinner as backup */
    .custom-spinner {
        width: 3rem;
        height: 3rem;
        border: 0.3em solid #f3f3f3;
        border-top: 0.3em solid #007bff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .toast-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        padding: 12px 20px;
        border-radius: 4px;
        color: white;
        font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-width: 300px;
        word-wrap: break-word;
        transition: opacity 0.5s ease;
    }
    
    .toast-notification.success {
        background-color: #28a745;
    }
    
    .toast-notification.error {
        background-color: #dc3545;
    }
    
    .chart-card {
        position: relative;
    }
    
    .chart-action-btn {
        margin-left: 5px;
    }
    
    .custom-date-inputs {
        display: none;
    }
    
    .custom-date-inputs.active {
        display: block;
    }
    
    /* Selection counts styling */
    .report-selection-counts {
        margin-top: 8px;
        padding: 8px 12px;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        border-radius: 6px;
        border-left: 4px solid #2196f3;
        font-size: 0.9rem;
    }
    
    .report-selection-counts i {
        color: #1976d2;
    }
    
    .selection-counts-content {
        margin-top: 4px;
    }
    
    .selection-count-item {
        margin: 2px 0;
        padding: 2px 0;
        font-weight: 500;
        color: #1565c0;
    }
    
    .selection-count-item:not(:last-child) {
        border-bottom: 1px solid rgba(25, 118, 210, 0.2);
        padding-bottom: 4px;
    }
    
    /* Selection Summary Table Styling */
    .selection-summary-table {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 16px;
        border: 1px solid #e9ecef;
    }
    
    .summary-title {
        color: #495057;
        font-weight: 600;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
    }
    
    .summary-title i {
        color: #007bff;
    }
    
    .summary-table {
        margin-bottom: 0;
        background: white;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .summary-table thead th {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        font-weight: 600;
        color: #495057;
        padding: 12px 8px;
        font-size: 0.875rem;
    }
    
    .summary-table tbody td {
        padding: 10px 8px;
        border-bottom: 1px solid #f1f3f4;
        font-size: 0.875rem;
        vertical-align: middle;
    }
    
    .summary-table tbody tr:hover {
        background-color: #f8f9fa;
    }
    
    .value-cell {
        color: #495057;
        font-weight: 500;
    }
    
    .count-cell .badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    .table-container {
        position: relative;
    }
    
    .table-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    
    .table-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 6px;
    }
    
    .table-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 6px;
        border: 2px solid #f1f1f1;
    }
    
    
    .modern-table {
        width: 100%;
        margin-bottom: 0;
        border-collapse: collapse;
    }

    
    .modern-table th {
        background-color: #9b9b9b;
        font-weight: 600;
        position: sticky;
        border-bottom: 2px solid #dee2e6;
        border-left: 1px solid #dee2e6;
        top: 0;
        z-index: 10;
    }

    /* Chart total count styling */
    .chart-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .chart-total {
        font-size: 0.875rem;
        color: #6c757d;
        display: flex;
        align-items: center;
    }

    .chart-total i {
        color: #007bff;
    }
</style>
    <div id="content" style="position: relative; overflow:hidden;">
        <div style="display: flex; justify-content: center; align-items: center;">
            <div class="title-controls" style="color: black;">
                Dashboard
            </div>
        </div>

        <nav class="page-menu bordered">
            <ul class="nav nav-tab" id="nav-tab">
                <li>
                    <a onclick="changeTabUrl('Dashboard'); toggleSidebar('Dashboard')" id="DashboardTab"
                        href="javascript:void(0)" class="active" data-bs-toggle="tab" data-bs-target="#dashboard">
                        My Dashboard<span></span></a>
                </li>
            </ul>
        </nav>

        <hr class="hrBeneathMenu">

        @if ($headOffice->id == '37')
            <div id="alert-placeholder"></div>
            <div class="tab-content" id="myTabContent">
                <div id="dashboard" class="dashboard tab-pane active show">
                    <div class="row g-0" style="width: 100%; display: flex;">
                        <div class="col-auto">
                            <div id="sidebar" class="border-end shadow-sm rounded">
                                <ul class="nav flex-column" role="tablist">
                                    @foreach ($tabs as $index => $tab)
                                        @php
                                            $reportCount = $savedReports->where('dashboard', $tab['id'])->count();
                                            $graphCount = $savedGraphs->filter(function ($graph) use ($tab) {
                                                    $sections = $graph->dashboard_section;
                                                    return is_array($sections) && in_array($tab['id'], $sections);
                                                })->count();
                                        @endphp
                                    
                                        @if ($reportCount > 0 || $graphCount > 0)
                                            <li class="nav-item">
                                                <a class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab"
                                                    href="#{{ $tab['id'] }}" role="tab">
                                                    {{ $tab['label'] }}
                                                </a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <div class="col" style="flex: 1; overflow-x: hidden;">
                            <div class="tab-content">
                                    <div class="tab-pane fade show active" id="patient_safety_incidents">
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainer">
                                        </div>                                        
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'patient_safety_incidents')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp

                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }} </h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'patient_safety_incidents',
                                            'section' => $section,
                                        ])
                                    @endforeach

                                </div>

                                <div class="tab-pane fade" id="controlled_drug_management">
                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'controlled_drug_management')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp

                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'controlled_drug_management',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="central_fulfillment">
                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'central_fulfillment')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp

                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'central_fulfillment',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="freedom_to_speak_up">

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'freedom_to_speak_up')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp

                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'freedom_to_speak_up',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="pharmacy_premises_inspection">
                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'pharmacy_premises_inspection')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'pharmacy_premises_inspection',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>
                                <div class="tab-pane fade" id="nhs_and_iG">
                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'nhs_and_iG')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'nhs_and_iG',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="Field_Managers">
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainerFieldManagers">
                                        </div>
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'Field_Managers')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'Field_Managers',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="monthly_board_report">
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainerBoardReport">
                                        </div>
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'monthly_board_report')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'monthly_board_report',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="customer_satisfaction_score">
                                    <h4>Customer Satisfaction Score</h4>
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainerCSAT">
                                        </div>
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'customer_satisfaction_score')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'customer_satisfaction_score',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="operations_report">
                                    <h4>Operations Report</h4>
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainerCSAT">
                                        </div>
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'operations_report')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'operations_report',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="MDSCF">
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainerCSAT">
                                        </div>
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'MDSCF')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'MDSCF',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>

                                <div class="tab-pane fade" id="patient_safety_report_compliance_dashboard">
                                    <div class="container mt-4">
                                        <div class="row" id="dynamicChartsContainerPatientSafetyCompliance">
                                        </div>
                                    </div>

                                    @php
                                        $sections = $savedReports
                                            ->where('dashboard', 'patient_safety_report_compliance_dashboard')
                                            ->pluck('section')
                                            ->unique();
                                    @endphp
                                    @foreach ($sections as $section)
                                        <h5 class="mt-4">{{ $section }}</h5>
                                        @include('head_office.reports', [
                                            'reports' => $savedReports,
                                            'dashboard' => 'patient_safety_report_compliance_dashboard',
                                            'section' => $section,
                                        ])
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @include('layouts.error')
    </div>
@endsection

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.10/umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="{{ asset('admin_assets/tree_select/treeselect.js') }}"></script>
<script>
    // Make organization tree data available globally for dynamic chart loader
    window.organizationTreeData = @json($headOffice->getOrganisationTree());
</script>
<script src="{{ asset('js/dynamic-chart-loader.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof DynamicChartLoader !== 'undefined' && !window.dynamicChartLoader) {
            console.log('Initializing DynamicChartLoader from view');
            window.dynamicChartLoader = new DynamicChartLoader();
            
            // Load charts for monthly board report immediately using server-side data
            initializeBoardReportCharts();
            
            // Set up tab change listeners to initialize charts when tabs are activated
            setupTabChangeListeners();
            
        } else if (window.dynamicChartLoader) {
            console.log('DynamicChartLoader already initialized');
        } else {
            console.error('DynamicChartLoader class not found');
        }
        
        function initializeBoardReportCharts() {
            console.log('initializeBoardReportCharts called');
            const container = document.getElementById('dynamicChartsContainerBoardReport');
            console.log('Container found:', container);
            
            if (!container) {
                console.error('dynamicChartsContainerBoardReport not found!');
                return;
            }
            
            if (container.children.length > 0) {
                console.log('Charts already loaded, skipping');
                return;
            }
            
            // Use server-side chart configurations
            const boardConfigurations = @json($boardReportChartConfigurations ?? []);
            console.log('Board configurations from server:', boardConfigurations);
            
            if (boardConfigurations && boardConfigurations.length > 0) {
                console.log('Found', boardConfigurations.length, 'configurations');
                
                boardConfigurations.forEach((config, index) => {
                    console.log('Processing config:', config.title);
                    const chartKey = config.key;
                    const chartId = `chart-${chartKey}-board`;
                    
                    // Generate chart card HTML
                    const chartCard = generateChartCardHTML(config, chartId, index);
                    container.insertAdjacentHTML('beforeend', chartCard);
                    console.log('Chart card inserted for:', chartId);
                    
                    // Initialize chart using the DynamicChartLoader's method
                    if (window.dynamicChartLoader) {
                        // Use a unique index for board report charts to avoid conflicts
                        const boardIndex = 1000 + index;
                        
                        // Create chart instance entry
                        const chartInstance = {
                            config: config,
                            chart: null,
                            data: [],
                            tableVisible: false,
                            index: boardIndex
                        };
                        window.dynamicChartLoader.charts.set(chartId, chartInstance);
                        
                        // Set up event listeners for this chart, but with custom site selection handler
                        setupBoardReportChartEventListeners(chartId, config, index);
                        
                        // Load initial data
                        window.dynamicChartLoader.loadChartData(chartId, 'thisMonth');
                        console.log('Chart initialized:', chartId);
                    }
                    
                    // Initialize tree select for this chart (with delay to ensure DOM is ready)
                    setTimeout(() => {
                        initializeTreeSelectForChart(index);
                    }, 200);
                });
            } else {
                console.error('No board configurations found');
            }
        }
        
        function setupTabChangeListeners() {
            // Listen for tab changes to initialize charts when needed
            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                const targetTab = $(e.target).attr('href');
                console.log('Tab switched to:', targetTab);
                
                if (targetTab === '#customer_satisfaction_score') {
                    initializeCSATCharts();
                } else if (targetTab === '#Field_Managers') {
                    initializeFieldManagersCharts();
                } else if (targetTab === '#patient_safety_report_compliance_dashboard') {
                    initializePatientSafetyComplianceCharts();
                }
            });
        }
        
        function initializeCSATCharts() {
            console.log('initializeCSATCharts called');
            const container = document.getElementById('dynamicChartsContainerCSAT');
            console.log('CSAT Container found:', container);
            
            if (!container) {
                console.error('dynamicChartsContainerCSAT not found!');
                return;
            }
            
            if (container.children.length > 0) {
                console.log('CSAT Charts already loaded, skipping');
                return;
            }
            
            // Use server-side chart configurations for CSAT
            const csatConfigurations = @json($csatChartConfigurations ?? []);
            console.log('CSAT configurations from server:', csatConfigurations);
            
            if (csatConfigurations && csatConfigurations.length > 0) {
                console.log('Found', csatConfigurations.length, 'CSAT configurations');
                
                csatConfigurations.forEach((config, index) => {
                    console.log('Processing CSAT config:', config.title);
                    const chartKey = config.key;
                    const chartId = `chart-${chartKey}-csat`;
                    
                    // Generate chart card HTML
                    const chartCard = generateChartCardHTML(config, chartId, index, 'csat');
                    container.insertAdjacentHTML('beforeend', chartCard);
                    console.log('CSAT Chart card inserted for:', chartId);
                    
                    // Initialize chart using the DynamicChartLoader's method
                    if (window.dynamicChartLoader) {
                        // Use a unique index for CSAT charts to avoid conflicts
                        const csatIndex = 2000 + index;
                        
                        // Create chart instance entry
                        const chartInstance = {
                            config: config,
                            chart: null,
                            data: [],
                            tableVisible: false,
                            index: csatIndex
                        };
                        window.dynamicChartLoader.charts.set(chartId, chartInstance);
                        
                        // Set up event listeners for this chart
                        setupCSATChartEventListeners(chartId, config, index);
                        
                        // Load initial data
                        window.dynamicChartLoader.loadChartData(chartId, 'thisMonth');
                        console.log('CSAT Chart initialized:', chartId);
                    }
                    
                    // Initialize tree select for this chart (with delay to ensure DOM is ready)
                    setTimeout(() => {
                        initializeTreeSelectForChart(index, 'csat');
                    }, 200);
                });
            } else {
                console.log('No CSAT configurations found, showing placeholder');
                container.innerHTML = '<div class="col-12"><div class="alert alert-info">No CSAT charts configured yet.</div></div>';
            }
        }
        
        function initializeFieldManagersCharts() {
            console.log('initializeFieldManagersCharts called');
            const container = document.getElementById('dynamicChartsContainerFieldManagers');
            console.log('Field Managers Container found:', container);
            
            if (!container) {
                console.error('dynamicChartsContainerFieldManagers not found!');
                return;
            }
            
            if (container.children.length > 0) {
                console.log('Field Managers Charts already loaded, skipping');
                return;
            }
            
            // Use server-side chart configurations for Field Managers
            const fieldManagersConfigurations = @json($fieldManagersChartConfigurations ?? []);
            console.log('Field Managers configurations from server:', fieldManagersConfigurations);
            
            if (fieldManagersConfigurations && fieldManagersConfigurations.length > 0) {
                console.log('Found', fieldManagersConfigurations.length, 'Field Managers configurations');
                
                fieldManagersConfigurations.forEach((config, index) => {
                    console.log('Processing Field Managers config:', config.title);
                    const chartKey = config.key;
                    const chartId = `chart-${chartKey}-fieldmanagers`;
                    
                    // Generate chart card HTML
                    const chartCard = generateChartCardHTML(config, chartId, index, 'fieldmanagers');
                    container.insertAdjacentHTML('beforeend', chartCard);
                    console.log('Field Managers Chart card inserted for:', chartId);
                    
                    // Initialize chart using the DynamicChartLoader's method
                    if (window.dynamicChartLoader) {
                        // Use a unique index for Field Managers charts to avoid conflicts
                        const fieldManagersIndex = 3000 + index;
                        
                        // Create chart instance entry
                        const chartInstance = {
                            config: config,
                            chart: null,
                            data: [],
                            tableVisible: false,
                            index: fieldManagersIndex
                        };
                        window.dynamicChartLoader.charts.set(chartId, chartInstance);
                        
                        // Set up event listeners for this chart
                        setupFieldManagersChartEventListeners(chartId, config, index);
                        
                        // Load initial data
                        window.dynamicChartLoader.loadChartData(chartId, 'thisMonth');
                        console.log('Field Managers Chart initialized:', chartId);
                    }
                    
                    // Initialize tree select for this chart (with delay to ensure DOM is ready)
                    setTimeout(() => {
                        initializeTreeSelectForChart(index, 'fieldmanagers');
                    }, 200);
                });
            } else {
                console.log('No Field Managers configurations found, showing placeholder');
                container.innerHTML = '<div class="col-12"><div class="alert alert-info">No Field Managers charts configured yet.</div></div>';
            }
        }
        
        function setupFieldManagersChartEventListeners(chartId, config, index) {
            if (!window.dynamicChartLoader) return;
            
            // Use the DynamicChartLoader's setupChartEventListeners but override the site selection handler
            window.dynamicChartLoader.setupChartEventListeners(chartId, config);
            
            // Override the site selection apply button with custom handler for Field Managers
            $(`#${chartId}ApplySiteSelection`).off('click').on('click', function() {
                const chartInstance = window.dynamicChartLoader.charts.get(chartId);
                if (!chartInstance) return;
                
                const selectedLocationsRaw = $(`#tree-hidden-fieldmanagers-${index}`).val();
                console.log('Raw selected locations value (Field Managers):', selectedLocationsRaw);
                
                if (selectedLocationsRaw) {
                    let locations = [];
                    
                    try {
                        // Try to parse as JSON first
                        locations = JSON.parse(selectedLocationsRaw);
                    } catch (e) {
                        console.log('JSON parse failed, trying comma-separated string');
                        // If JSON parse fails, try comma-separated string
                        if (typeof selectedLocationsRaw === 'string') {
                            locations = selectedLocationsRaw.split(',').filter(loc => loc.trim() !== '');
                        } else if (Array.isArray(selectedLocationsRaw)) {
                            locations = selectedLocationsRaw;
                        }
                    }
                    
                    console.log('Processed locations for Field Managers chart', chartId, ':', locations);
                    
                    if (locations.length > 0) {
                        window.dynamicChartLoader.loadChartData(chartId, 'custom', null, null, locations);
                        $(`#${chartId}SiteSelectionModal`).modal('hide');
                    } else {
                        window.dynamicChartLoader.showToast('error', 'Please select at least one location');
                    }
                } else {
                    window.dynamicChartLoader.showToast('error', 'Please select at least one location');
                }
            });
        }
        
        function setupCSATChartEventListeners(chartId, config, index) {
            if (!window.dynamicChartLoader) return;
            
            // Use the DynamicChartLoader's setupChartEventListeners but override the site selection handler
            window.dynamicChartLoader.setupChartEventListeners(chartId, config);
            
            // Override the site selection apply button with custom handler for CSAT
            $(`#${chartId}ApplySiteSelection`).off('click').on('click', function() {
                const chartInstance = window.dynamicChartLoader.charts.get(chartId);
                if (!chartInstance) return;
                
                const selectedLocationsRaw = $(`#tree-hidden-csat-${index}`).val();
                console.log('Raw selected locations value (CSAT):', selectedLocationsRaw);
                
                if (selectedLocationsRaw) {
                    let locations = [];
                    
                    try {
                        // Try to parse as JSON first
                        locations = JSON.parse(selectedLocationsRaw);
                    } catch (e) {
                        console.log('JSON parse failed, trying comma-separated string');
                        // If JSON parse fails, try comma-separated string
                        if (typeof selectedLocationsRaw === 'string') {
                            locations = selectedLocationsRaw.split(',').filter(loc => loc.trim() !== '');
                        } else if (Array.isArray(selectedLocationsRaw)) {
                            locations = selectedLocationsRaw;
                        }
                    }
                    
                    console.log('Processed locations for CSAT chart', chartId, ':', locations);
                    
                    if (locations && locations.length > 0) {
                        // Reload chart data with selected locations
                        window.dynamicChartLoader.loadChartData(chartId, 'thisMonth', null, null, locations);
                    } else {
                        window.dynamicChartLoader.showToast('error', 'Please select at least one location');
                    }
                } else {
                    window.dynamicChartLoader.showToast('error', 'Please select at least one location');
                }
            });
        }
        
        function setupBoardReportChartEventListeners(chartId, config, index) {
            if (!window.dynamicChartLoader) return;
            
            // Use the DynamicChartLoader's setupChartEventListeners but override the site selection handler
            window.dynamicChartLoader.setupChartEventListeners(chartId, config);
            
            // Override the site selection apply button with custom handler for board report
            $(`#${chartId}ApplySiteSelection`).off('click').on('click', function() {
                const chartInstance = window.dynamicChartLoader.charts.get(chartId);
                if (!chartInstance) return;
                
                const selectedLocationsRaw = $(`#tree-hidden-board-${index}`).val();
                console.log('Raw selected locations value (board):', selectedLocationsRaw);
                
                if (selectedLocationsRaw) {
                    let locations = [];
                    
                    try {
                        // Try to parse as JSON first
                        locations = JSON.parse(selectedLocationsRaw);
                    } catch (e) {
                        console.log('JSON parse failed, trying comma-separated string');
                        // If JSON parse fails, try comma-separated string
                        if (typeof selectedLocationsRaw === 'string') {
                            locations = selectedLocationsRaw.split(',').filter(loc => loc.trim() !== '');
                        } else if (Array.isArray(selectedLocationsRaw)) {
                            locations = selectedLocationsRaw;
                        }
                    }
                    
                    console.log('Processed locations for chart', chartId, ':', locations);
                    
                    if (locations && locations.length > 0) {
                        // Reload chart data with selected locations
                        window.dynamicChartLoader.loadChartData(chartId, 'thisMonth', null, null, locations);
                    } else {
                        window.dynamicChartLoader.showToast('error', 'Please select at least one location');
                    }
                } else {
                    window.dynamicChartLoader.showToast('error', 'Please select at least one location');
                }
            });
        }
        
        function initializeTreeSelectForChart(index, chartType = 'board') {
            const options = @json($headOffice->getOrganisationTree());
            const dropdown = document.querySelector(`#tree-hidden-${chartType}-${index}`);
            
            if (dropdown && options && options.length > 0) {
                const parentContainer = dropdown.closest('.assign-sites').querySelector('.treeselect');
                
                if (parentContainer) {
                    parentContainer.innerHTML = ''; // Clear any existing content
                    
                    try {
                        const treeselect = new Treeselect({
                            parentHtmlContainer: parentContainer,
                            value: [],
                            options: options,
                            alwaysOpen: false,
                            appendToBody: false,
                            listSlotHtmlComponent: null,
                            disabled: false,
                            emptyText: 'No locations selected',
                            showCount: true,
                            isGroupedValue: true,
                            isIndependentNodes: true
                        });

                        if (treeselect.srcElement) {
                            treeselect.srcElement.addEventListener('input', (e) => {
                                dropdown.value = e.detail;
                            });
                        }
                    } catch (error) {
                        console.error("Error initializing TreeSelect for chart:", error);
                    }
                }
            }
        }
        
        function generateChartCardHTML(config, chartId, index, chartType = 'board') {
            const columnClass = config.data_processing_type === 'count_by_area' ? 'col-md-12' : 'col-md-6';
            return `
                <div class="${columnClass}">
                    <div class="chart-card card shadow-sm border position-relative" id="${chartId}Card">
                        <div class="loading-overlay" id="${chartId}Loading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </div>
                        <div class="chart-header card-header bg-light d-flex justify-content-between align-items-center">
                            <div class="chart-info">
                                <h5 class="chart-title mb-0" id="${chartId}Title">${config.title}</h5>
                                <div class="chart-total" id="${chartId}Total" style="display: none;">
                                    <i class="fas fa-chart-bar me-1"></i>
                                    <strong>Total Records:</strong> <span id="${chartId}TotalCount">0</span>
                                </div>
                            </div>
                            <div class="chart-actions">
                                <button class="btn btn-sm btn-outline-secondary chart-action-btn"
                                        id="view${chartId}Table" title="Toggle Table View">
                                    <i class="fas fa-table"></i> View Table
                                </button>
                                <!-- Export buttons removed/blocked -->
                                <!-- 
                                <button class="btn btn-sm btn-outline-secondary chart-action-btn"
                                        id="export${chartId}Excel" title="Export to Excel">
                                    <i class="fas fa-file-excel"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary chart-action-btn"
                                        id="export${chartId}JPEG" title="Export as Image">
                                    <i class="fas fa-file-image"></i>
                                </button>
                                -->
                                <button class="btn btn-sm btn-outline-secondary chart-action-btn"
                                        id="${chartId}FullScreen" title="Full Screen">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                        </div>
                        <div class="chart-body card-body">
                            <div id="${chartId}Container"></div>
                        </div>
                        <div class="chart-options card-footer bg-light">
                            <div class="period-selector">
                                <div class="period-label fw-bold mb-2">View:</div>
                                <div class="period-option form-check form-check-inline">
                                    <input type="radio" name="${chartId}PeriodSelect"
                                           id="${chartId}ThisMonth" checked value="thisMonth"
                                           class="form-check-input">
                                    <label for="${chartId}ThisMonth" class="form-check-label">This month</label>
                                </div>
                                <div class="period-option form-check form-check-inline">
                                    <input type="radio" name="${chartId}PeriodSelect"
                                           id="${chartId}LastMonth" value="lastMonth"
                                           class="form-check-input">
                                    <label for="${chartId}LastMonth" class="form-check-label">Last month</label>
                                </div>
                                <div class="period-option form-check form-check-inline">
                                    <input type="radio" name="${chartId}PeriodSelect"
                                           id="${chartId}Custom" value="custom"
                                           class="form-check-input">
                                    <label for="${chartId}Custom" class="form-check-label">Custom date</label>
                                </div>
                            </div>
                            <div class="custom-date-inputs row mt-2" id="${chartId}CustomDateInputs">
                                <div class="col-md-4">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">From</span>
                                        <input type="date" class="form-control form-control-sm"
                                               id="${chartId}StartDate">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">To</span>
                                        <input type="date" class="form-control form-control-sm"
                                               id="${chartId}EndDate">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-sm btn-primary"
                                            id="${chartId}ApplyCustomDates">Apply</button>
                                </div>
                            </div>
                            <div class="assign-sites" style="padding: 10px;">
                                <div class="organisation-structure-add-content">
                                    <label class="inputGroup">Sites:
                                        <div class="treeselect"></div>
                                        <input type="hidden" name="assigned_locations" id="tree-hidden-${chartType}-${index}">
                                    </label>
                                    <button class="btn btn-sm btn-primary"
                                            id="${chartId}ApplySiteSelection">Apply</button>
                                </div>
                            </div>
                        </div>
                        <div id="${chartId}DataTableContainer" class="card-body border-top"
                             style="display: none; width: 100%; height: 350px; overflow: auto;">
                        </div>
                    </div>
                </div>
            `;
        }

        setTimeout(() => {
            const options = @json($headOffice->getOrganisationTree());
            const dropdowns = document.querySelectorAll('.treeselect');

            dropdowns.forEach((domEl, index) => {
                if (options && options.length > 0) {
                    domEl.innerHTML = '';

                    try {
                        const treeselect = new Treeselect({
                            parentHtmlContainer: domEl,
                            value: [],
                            options: options,
                            alwaysOpen: false,
                            appendToBody: false,
                            listSlotHtmlComponent: null,
                            disabled: false,
                            emptyText: 'No locations selected',
                            showCount: true,
                            isGroupedValue: true,
                            isIndependentNodes: true
                        });

                        if (treeselect.srcElement) {
                            treeselect.srcElement.addEventListener('input', (e) => {
                                document.getElementById(`tree-hidden-${index}`).value =
                                    e.detail;
                            });
                        }
                    } catch (error) {
                        console.error("Error initializing TreeSelect:", error);
                    }
                }
            });
            
        }, 300);
    });
</script>
<script>
    $(document).ready(function() {
        const reportStates = {};

        // Initialize the reports
        @foreach ($savedReports as $report)
            initializeReport({{ $report->id }});
        @endforeach

        // Export report function - Fixed AJAX version
        $('.export-report').on('click', function() {
            const reportId = $(this).data('report-id');
            exportReport(reportId);
        });


        function exportReport(reportId) {
            const currentState = reportStates[reportId] || {
                period: 'thisMonth'
            };
            const exportBtn = $(`.export-report[data-report-id="${reportId}"]`);
            const originalText = exportBtn.html();

            // Show loading state
            exportBtn.html('<i class="fas fa-spinner fa-spin"></i> Exporting...').prop('disabled', true);

            // Build request data
            let requestData = {
                report_id: reportId,
                period: currentState.period
            };

            // Add additional parameters
            if (currentState.period === 'custom' && currentState.customDates) {
                requestData.start_date = currentState.customDates.startDate;
                requestData.end_date = currentState.customDates.endDate;
            } else if (currentState.period === 'quarterly' && currentState.quarterlySelection) {
                requestData.quarter = currentState.quarterlySelection.quarter;
                requestData.year = currentState.quarterlySelection.year;
            }

            // Use fetch API to handle the download without page reload
            fetch("{{ route('reports.export') }}?" + new URLSearchParams(requestData))
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    
                    // Get filename from response headers - try multiple patterns
                    const contentDisposition = response.headers.get('content-disposition');
                    let filename = 'report.xlsx'; // fallback
                    
                    console.log('Content-Disposition header:', contentDisposition);
                    
                    if (contentDisposition) {
                        // Try different patterns for filename extraction
                        let filenameMatch = contentDisposition.match(/filename="([^"]+)"/);
                        if (!filenameMatch) {
                            filenameMatch = contentDisposition.match(/filename=([^;]+)/);
                        }
                        if (!filenameMatch) {
                            filenameMatch = contentDisposition.match(/filename\*=UTF-8''([^;]+)/);
                        }
                        
                        if (filenameMatch) {
                            filename = decodeURIComponent(filenameMatch[1].trim());
                            console.log('Extracted filename:', filename);
                        }
                    }
                    
                    return { blob: response.blob(), filename: filename };
                })
                .then(async (data) => {
                    const blob = await data.blob;
                    // Create download link
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = data.filename;

                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    a.remove();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error exporting report: ' + error.message);
                })
                .finally(() => {
                    exportBtn.html(originalText).prop('disabled', false);
                });
        }

        // Load report data function - FIXED
        function loadReportData(reportId, period, options = null) {
            // Check if this is a large date range that might take longer
            let isLargeDateRange = false;
            let loadingMessage = 'Loading...';
            
            if (period === 'thisYear' || period === 'lastYear' || period === 'yearToDate') {
                isLargeDateRange = true;
                loadingMessage = 'Loading may take up to several minutes because we are pulling a large number of records...';
            } else if (options && options.startDate && options.endDate) {
                const startDate = new Date(options.startDate);
                const endDate = new Date(options.endDate);
                const daysDiff = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
                
                if (daysDiff > 90) { // More than 3 months
                    isLargeDateRange = true;
                    loadingMessage = 'Loading may take up to several minutes because we are pulling a large number of records...';
                }
            }
            
            // Show enhanced loading state
            const loadingHtml = `
                <tr>
                    <td colspan="100%" class="text-center">
                        <div class="loading-state d-flex flex-column align-items-center">
                            <div class="custom-spinner mb-3" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <div class="text-muted">
                                <i class="fas fa-database me-2"></i>
                                ${loadingMessage}
                            </div>
                            ${isLargeDateRange ? '<div class="text-warning small mt-2"><i class="fas fa-clock me-1"></i>Please be patient, this may take a while...</div>' : ''}
                        </div>
                    </td>
                </tr>
            `;
            
            $(`#reportTableBody-${reportId}`).html(loadingHtml);
            
            // For count_selection_only reports, also show loading in the summary area
            const reportType = $(`#reportCard-${reportId}`).data('report-type');
            if (reportType === 'count_selection_only') {
                const summaryLoadingHtml = `
                    <div class="loading-state d-flex flex-column align-items-center">
                        <div class="custom-spinner mb-3" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="text-muted">
                            <i class="fas fa-chart-pie me-2"></i>
                            ${loadingMessage}
                        </div>
                        ${isLargeDateRange ? '<div class="text-warning small mt-2"><i class="fas fa-clock me-1"></i>Please be patient, this may take a while...</div>' : ''}
                    </div>
                `;
                $(`#selectionSummaryTable-${reportId}`).html(summaryLoadingHtml).show();
            }

            let ajaxData = {
                report_id: reportId,
                period: period
            };

            // Add additional parameters based on period type
            if (period === 'custom' && options) {
                ajaxData.start_date = options.startDate;
                ajaxData.end_date = options.endDate;
            } else if (period === 'quarterly' && options) {
                ajaxData.quarter = options.quarter;
                ajaxData.year = options.year;
            } else if (period === 'matrixYear' && options) {
                ajaxData.year = options.year;
            }

            console.log('Loading report data with:', ajaxData); // Debug log

            $.ajax({
                url: "{{ route('reports.view') }}",
                method: 'GET',
                data: ajaxData,
                success: function(response) {
                    console.log('Report response:', response); // Debug log
                    if (response.success) {
                        updateReportTable(reportId, response);
                    } else {
                        showError(reportId, response.message || 'Failed to load report data');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX Error:', error);
                    let errorMessage = 'Failed to load report data';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    showError(reportId, errorMessage);
                }
            });
        }

        // Update report table function
        function updateReportTable(reportId, response) {
            const report = response.report;
            const data = response.data || [];

            // Show/hide total based on show_total setting
            if (report.show_total == 1) {
                $(`#reportTotal-${reportId}`).show();
                $(`#totalCount-${reportId}`).text(data.length.toLocaleString());
            } else {
                $(`#reportTotal-${reportId}`).hide();
            }

            // Handle count_selection_only reports differently
            if (report.report_type === 'count_selection_only') {
                // For count_selection_only reports, hide the entire table container
                $(`#tableContainer-${reportId}`).hide();
                
                // Show selection summary table
                if (response.selection_summary && response.selection_summary.length > 0) {
                    buildSelectionSummaryTable(reportId, response.selection_summary);
                } else {
                    $(`#selectionSummaryTable-${reportId}`).hide();
                }
                
                return; // Exit early for count_selection_only reports
            }

            // Show/hide selection counts for count_selection reports
            if (response.selection_summary && response.selection_summary.length > 0) {
                $(`#reportSelectionCounts-${reportId}`).show();
                let selectionCountsHtml = '';
                response.selection_summary.forEach(function(summaryItem) {
                    selectionCountsHtml += `
                        <div class="selection-count-item">
                            <span class="selection-category">${summaryItem.display_name}:</span>
                            <span class="selection-value">${summaryItem.value}</span>
                            <span class="selection-count">(${summaryItem.count} times)</span>
                        </div>
                    `;
                });
                $(`#selectionCountsContent-${reportId}`).html(selectionCountsHtml);
            } else {
                $(`#reportSelectionCounts-${reportId}`).hide();
            }

            // Build selection summary table for count_selection reports
            if (response.selection_summary && response.selection_summary.length > 0) {
                // Get the display name from the first item to use as header
                const displayName = response.selection_summary[0].display_name;
                
                let summaryTableHtml = `
                    <div class="selection-summary-table mb-3">
                        <h6 class="summary-title mb-2">
                            <i class="fas fa-chart-pie me-2"></i>Summary
                        </h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered summary-table">
                                <thead class="table-light">
                                    <tr>
                                        <th>${displayName}</th>
                                        <th>Count</th>
                                    </tr>
                                </thead>
                                <tbody>
                `;
                
                response.selection_summary.forEach(function(summaryItem) {
                    summaryTableHtml += `
                        <tr>
                            <td class="value-cell">${summaryItem.value}</td>
                            <td class="count-cell text-center">
                                <span class="badge bg-primary">${summaryItem.count}</span>
                            </td>
                        </tr>
                    `;
                });
                
                summaryTableHtml += `
                                </tbody>
                            </table>
                        </div>
                    </div>
                `;
                
                $(`#selectionSummaryTable-${reportId}`).html(summaryTableHtml).show();
            } else {
                $(`#selectionSummaryTable-${reportId}`).hide();
            }

            // Show the table container for non-count_selection_only reports
            $(`#tableContainer-${reportId}`).show();

            // Build table headers
            let headerHtml = '<tr>';
            if (report.columns && report.columns.length > 0) {
                report.columns.forEach(function(column) {
                    // Skip hidden columns for monthly_submission_matrix
                    if (report.report_type === 'monthly_submission_matrix') {
                        if (column === 'site_id' || column.endsWith('_status')) {
                            return; // Skip this column
                        }
                    }
                    const displayName = column
                        .split('_')
                        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                        .join(' ');
                    headerHtml += `<th>${displayName}</th>`;
                });
            }
            headerHtml += '</tr>';
            $(`#reportTableHead-${reportId}`).html(headerHtml);

            // Build table rows
            let bodyHtml = '';
            if (data.length === 0) {
                bodyHtml = `
                    <tr>
                        <td colspan="100%" class="text-center">
                            <div class="no-data-state d-flex flex-column align-items-center">
                                <div class="text-muted mb-2">
                                    <i class="fas fa-inbox fa-2x"></i>
                                </div>
                                <div class="text-muted fw-bold">No Data Available</div>
                                <div class="text-muted small mt-1">No records found for the selected time period</div>
                            </div>
                        </td>
                    </tr>
                `;
            } else {
                data.forEach(function(row, rowIndex) {
                    bodyHtml += '<tr>';
                    report.columns.forEach(function(column, colIndex) {
                        let cellValue = row[column] || '-';
                        let cellStyle = '';
                        
                        if (rowIndex === 0 && colIndex === 0) {
                            console.log('First cell - Column:', column, 'Value:', cellValue, 'Row keys:', Object.keys(row));
                        }
                        
                        // Special handling for monthly_submission_matrix report type
                        if (report.report_type === 'monthly_submission_matrix') {
                            // Check if this is a month column (has a _status companion)
                            const statusKey = column + '_status';
                            if (row[statusKey]) {
                                if (row[statusKey] === 'submitted') {
                                    cellStyle = ' style="background-color: #d4edda; color: #155724; text-align: center; font-weight: bold;"';
                                } else if (row[statusKey] === 'not_submitted') {
                                    cellStyle = ' style="background-color: #f8d7da; color: #721c24; text-align: center; font-weight: bold;"';
                                }
                            }
                            // Hide site_id column
                            if (column === 'site_id') {
                                return; // Skip this column
                            }
                        }
                        
                        // Convert case numbers to clickable links
                        if (column === 'case_number' && cellValue !== '-') {
                            // Ensure cellValue is a string before calling includes
                            const cellValueStr = String(cellValue);
                            // Check if it's already an HTML link
                            if (!cellValueStr.includes('<a href')) {
                                const caseNumber = cellValue;
                                const url = `/head_office/case/manager/view/${caseNumber}`;
                                cellValue = `<a href="${url}" target="_blank" style="color: #0066cc; text-decoration: underline;">${caseNumber}</a>`;
                            }
                        }
                        
                        bodyHtml += `<td${cellStyle}>${cellValue}</td>`;
                    });
                    bodyHtml += '</tr>';
                });
            }
            $(`#reportTableBody-${reportId}`).html(bodyHtml);
        }

        // Helper function to build selection summary table
        function buildSelectionSummaryTable(reportId, selectionSummary) {
            // Get the display name from the first item to use as header
            const displayName = selectionSummary[0].display_name;
            
            let summaryTableHtml = `
                <div class="selection-summary-table mb-3">
                    <h6 class="summary-title mb-2">
                        <i class="fas fa-chart-pie me-2"></i>Summary
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered summary-table">
                            <thead class="table-light">
                                <tr>
                                    <th>${displayName}</th>
                                    <th>Count</th>
                                </tr>
                            </thead>
                            <tbody>
            `;
            
            selectionSummary.forEach(function(summaryItem) {
                summaryTableHtml += `
                    <tr>
                        <td class="value-cell">${summaryItem.value}</td>
                        <td class="count-cell text-center">
                            <span class="badge bg-primary">${summaryItem.count}</span>
                        </td>
                    </tr>
                `;
            });
            
            summaryTableHtml += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
            
            $(`#selectionSummaryTable-${reportId}`).html(summaryTableHtml).show();
        }

        // Show error function
        function showError(reportId, message) {
            const errorHtml = `
                <tr>
                    <td colspan="100%" class="text-center">
                        <div class="error-state d-flex flex-column align-items-center">
                            <div class="text-danger mb-2">
                                <i class="fas fa-exclamation-triangle fa-2x"></i>
                            </div>
                            <div class="text-danger fw-bold">Error Loading Data</div>
                            <div class="text-muted small mt-1">${message}</div>
                        </div>
                    </td>
                </tr>
            `;
            $(`#reportTableBody-${reportId}`).html(errorHtml);
            // Hide total when there's an error
            $(`#reportTotal-${reportId}`).hide();
        }

        // Initialize report function - FIXED
        function initializeReport(reportId) {
            // Check if this is a monthly_submission_matrix report
            const reportType = $(`#reportCard-${reportId}`).data('report-type');
            
            if (reportType === 'monthly_submission_matrix') {
                // For matrix reports, initialize with current year
                const currentYear = new Date().getFullYear();
                reportStates[reportId] = {
                    period: 'matrixYear',
                    year: currentYear
                };
                
                // Load initial data with current year
                loadReportData(reportId, 'matrixYear', { year: currentYear });
                updateDateRangeDisplay(reportId, 'matrixYear', { year: currentYear });
            } else {
                // Get the initially checked radio button value
                const initiallyChecked = $(`input[name="periodSelect-${reportId}"]:checked`).val() || 'thisMonth';

                // Initialize with the actually checked value
                reportStates[reportId] = {
                    period: initiallyChecked
                };

                // Load initial data based on what's actually checked
                loadReportData(reportId, initiallyChecked);
                updateDateRangeDisplay(reportId, initiallyChecked);
            }

            // Set up period selector radio buttons - FIXED EVENT HANDLING
            $(`input[name="periodSelect-${reportId}"]`).off('change').on('change', function() {
                const reportId = $(this).data('report-id');
                const period = $(this).val();

                // Prevent event bubbling
                if (reportStates[reportId] && reportStates[reportId].period === period) {
                    return; // Already selected, don't process again
                }

                reportStates[reportId] = {
                    period: period
                };

                console.log(`Period changed to: ${period} for report ${reportId}`); // Debug log

                // Toggle controls visibility
                if (period === 'custom') {
                    $(`.quarterly-controls-${reportId}`).slideUp();
                    $(`.custom-date-range-${reportId}`).slideDown();
                } else if (period === 'quarterly') {
                    $(`.custom-date-range-${reportId}`).slideUp();
                    $(`.quarterly-controls-${reportId}`).slideDown();
                } else {
                    $(`.quarterly-controls-${reportId}, .custom-date-range-${reportId}`).slideUp();
                    updateDateRangeDisplay(reportId, period);
                    loadReportData(reportId, period);
                }
            });

            // Set up custom date apply button
            $(`.apply-custom-date[data-report-id="${reportId}"]`).off('click').on('click', function() {
                const startDate = $(`#customStartDate-${reportId}`).val();
                const endDate = $(`#customEndDate-${reportId}`).val();

                if (!startDate || !endDate) {
                    alert('Please select both start and end dates');
                    return;
                }

                if (new Date(endDate) < new Date(startDate)) {
                    alert('End date cannot be before start date');
                    return;
                }

                reportStates[reportId] = {
                    period: 'custom',
                    customDates: {
                        startDate,
                        endDate
                    }
                };

                updateDateRangeDisplay(reportId, 'custom', {
                    startDate,
                    endDate
                });
                loadReportData(reportId, 'custom', {
                    startDate,
                    endDate
                });
            });

            // Set up quarterly apply button
            $(`.apply-quarterly[data-report-id="${reportId}"]`).off('click').on('click', function() {
                const quarter = $(`#quarterSelect-${reportId}`).val();
                const year = $(`#quarterYearSelect-${reportId}`).val();

                reportStates[reportId] = {
                    period: 'quarterly',
                    quarterlySelection: {
                        quarter,
                        year
                    }
                };

                updateDateRangeDisplay(reportId, 'quarterly', {
                    quarter,
                    year
                });
                loadReportData(reportId, 'quarterly', {
                    quarter,
                    year
                });
            });

            // Set up matrix year apply button (for monthly_submission_matrix reports)
            $(`.apply-matrix-year[data-report-id="${reportId}"]`).off('click').on('click', function() {
                const year = $(`#matrixYearSelect-${reportId}`).val();

                reportStates[reportId] = {
                    period: 'matrixYear',
                    year: year
                };

                updateDateRangeDisplay(reportId, 'matrixYear', { year });
                loadReportData(reportId, 'matrixYear', { year });
            });
        }

        // Function to update the date range display - FIXED
        function updateDateRangeDisplay(reportId, period, options = null) {
            const now = new Date();
            let displayText = '';

            switch (period) {
                case 'thisMonth':
                    const thisMonth = now.toLocaleString('default', {
                        month: 'long'
                    });
                    const thisYear = now.getFullYear();
                    displayText = `${thisMonth} ${thisYear} (This Month)`;
                    break;

                case 'lastMonth':
                    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                    const lastMonthName = lastMonth.toLocaleString('default', {
                        month: 'long'
                    });
                    const lastMonthYear = lastMonth.getFullYear();
                    displayText = `${lastMonthName} ${lastMonthYear} (Last Month)`;
                    break;

                case 'thisYear':
                    displayText = `${now.getFullYear()} (This Year)`;
                    break;

                case 'lastYear':
                    displayText = `${now.getFullYear() - 1} (Last Year)`;
                    break;

                case 'yearToDate':
                    displayText =
                        `Jan ${now.getFullYear()} - ${now.toLocaleString('default', { month: 'short' })} ${now.getFullYear()} (Year to Date)`;
                    break;

                case 'quarterly':
                    if (options) {
                        displayText = `${options.quarter} ${options.year} (Quarterly)`;
                    }
                    break;

                case 'custom':
                    if (options) {
                        const startDate = new Date(options.startDate);
                        const endDate = new Date(options.endDate);
                        
                        // Check if dates are valid (not Jan 1, 1970)
                        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime()) || 
                            startDate.getTime() === 0 || endDate.getTime() === 0) {
                            displayText = 'Invalid Date Range (Custom)';
                        } else {
                            const startFormatted = startDate.toLocaleDateString('en-US', {
                                month: 'short',
                                day: 'numeric',
                                year: 'numeric'
                            });
                            const endFormatted = endDate.toLocaleDateString('en-US', {
                                month: 'short',
                                day: 'numeric',
                                year: 'numeric'
                            });

                            if (startFormatted === endFormatted) {
                                displayText = `${startFormatted} (Custom)`;
                            } else {
                                displayText = `${startFormatted} to ${endFormatted} (Custom)`;
                            }
                        }
                    } else {
                        displayText = 'No Date Range Selected (Custom)';
                    }
                    break;

                case 'matrixYear':
                    if (options && options.year) {
                        displayText = `Year: ${options.year}`;
                    } else {
                        displayText = 'Select Year';
                    }
                    break;

                default:
                    displayText = 'Select Date Range';
            }

            $(`#dateRangeDisplay-${reportId}`).text(displayText);
        }

        // Helper to format column names for display
        function formatColumnName(column) {
            return column
                .split('_')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');
        }
    });
</script>