<!-- ADMIN DASHBOARD -->

@extends('adminlte::page')

@section('title', 'IPRS | Dashboard')

@section('content_header')

@stop

@section('content')
    <main>
        <div class="col d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-3">
            <div class="d-flex flex-row align-items-center mb-3 mb-sm-0">
                <div class="d-flex justify-content-center align-items-center rounded-circle" style="width: 44px; height: 44px; background-color: #F94A7A;">
                    <span class="h4 mb-0 text-white"><b>{{ Auth::user()->name[0] }}</b></span>
                </div>
                <div class="d-flex flex-column ml-3">
                    <p class="text-secondary mb-0">Welcome back!</p>
                    <h5>{{ Auth::user()->name }} | {{ Auth::user()->contract->client->name_fl }}</h5>
                </div>
            </div>
        </div>

        <!-- Data Synchronization Status -->
        <div class="mt-4">
            <div class="card-header">
                <h3 class="card-title">
                    Data Sourcing
                </h3>
            </div>
            <div class="row">
                <!-- SUMMARY WIDGETS -->
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Last Successful Sync" 
                        text="2 minutes ago" 
                        icon="fas fa-check-circle fa-2x"
                        theme="gradient-teal"
                        progress="100"
                        description="All systems operational"/>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Sync Success Rate" 
                        text="98.7%" 
                        icon="fas fa-sync-alt fa-2x"
                        theme="gradient-teal"
                        progress="98.7"
                        description="↑1.2% from last week"/>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Failed Syncs (24h)" 
                        text="18" 
                        icon="fas fa-exclamation-triangle fa-2x"
                        theme="gradient-orange"
                        progress="0.4"
                        description="0.4% error rate"/>
                </div>
                
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Unverified Records" 
                        text="247" 
                        icon="fas fa-question-circle fa-2x"
                        theme="gradient-indigo"
                        progress="15"
                        description="15% overdue"/>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Records Processed" 
                        text="42,618" 
                        icon="fas fa-database fa-2x"
                        theme="gradient-info"
                        progress="92"
                        description="↑8% from yesterday">
                        <div class="text-xs text-muted">NRB: 18,245 | CRS: 12,102 | DOI: 12,271</div>
                    </x-adminlte-info-box>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Duplicate Records (30d)" 
                        text="1,842" 
                        icon="fas fa-copy fa-2x"
                        theme="gradient-orange"
                        progress=3.2
                        description="0.32% of total records">
                        <div class="text-xs text-muted">NRB: 892 | CRS: 612 | DOI: 338</div>
                    </x-adminlte-info-box>
                </div>
            </div>
        </div>

        <!-- TOP ROW: SYSTEM HEALTH WIDGETS -->
        <div class="mt-4">
            <div class="card-header">
                <h3 class="card-title">
                    API Management
                </h3>
            </div>              
            <div class="row">
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="API Requests (Today)" 
                        text="42,618" 
                        icon="fas fa-exchange-alt fa-2x"
                        theme="gradient-teal"
                        progress="78"
                        description="↑12% from yesterday">
                        <div class="text-xs text-muted">External: 32,145 | Internal: 10,473</div>
                    </x-adminlte-info-box>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Total API Requests" 
                        text="1.42M" 
                        icon="fas fa-exchange-alt fa-2x"
                        theme="gradient-primary"
                        progress="12"
                        description="↑12% from last week">
                        <div class="text-xs text-muted">24h: 42,618 requests</div>
                    </x-adminlte-info-box>
                </div>
                
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Avg Response Time" 
                        text="143ms" 
                        icon="fas fa-tachometer-alt fa-2x"
                        theme="gradient-indigo"
                        progress="65"
                        description="Max: 2.4s">
                    </x-adminlte-info-box>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Failed Requests" 
                        text="0.23%" 
                        icon="fas fa-exclamation-triangle fa-2x"
                        theme="gradient-warning"
                        progress="0.23"
                        description="↓0.05% from yesterday">
                        <div class="text-xs text-muted">328 failures (24h)</div>
                    </x-adminlte-info-box>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Error Rate" 
                        text="0.23%" 
                        icon="fas fa-exclamation-triangle fa-2x"
                        theme="gradient-orange"
                        progress="0.23"
                        description="38 failed requests">
                    </x-adminlte-info-box>
                </div>
                
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Uptime (30d)" 
                        text="99.97%" 
                        icon="fas fa-heartbeat fa-2x"
                        theme="gradient-green"
                        progress="99.97"
                        description="4m 12s downtime">
                    </x-adminlte-info-box>
                </div>
            </div>
        </div>

        <!-- User Activity & Access Logs -->
        <div class="mt-4">
            <div class="card-header">
                <h3 class="card-title">
                    User Management
                </h3>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Existing Contracts" 
                        text="1,387" 
                        icon="fas fa-copy fa-2x"
                        theme="gradient-teal"
                        progress=""
                        description="1,387 Valid Contracts"/>
                </div>                

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Expired Contracts" 
                        text="345" 
                        icon="fas fa-exclamation-triangle fa-2x"
                        theme="gradient-orange"
                        progress=""
                        description="345 Expired Contracts"/>
                </div> 

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Active Users (24h)" 
                        text="142" 
                        icon="fas fa-users fa-2x"
                        theme="gradient-teal"
                        progress="15"
                        description="↑15% from yesterday"/>
                </div>
                
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Failed Logins (24h)" 
                        text="28" 
                        icon="fas fa-user-lock fa-2x"
                        theme="gradient-orange"
                        progress="8"
                        description="↓3 from yesterday"/>
                </div>
                
                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Avg Session Duration" 
                        text="24m 18s" 
                        icon="fas fa-clock fa-2x"
                        theme="gradient-info"
                        progress="12"
                        description="↑12% from last week"/>
                </div>

                <div class="col-md-2">
                    <x-adminlte-info-box 
                        title="Avg Query Time" 
                        text="142ms" 
                        icon="fas fa-database fa-2x"
                        theme="gradient-indigo"
                        progress="85"
                        description="Slowest: 2.4s"
                        id="queryTimeWidget"/>
                </div>
                               
            </div>
        </div>


        <div class="d-flex flex-column flex-lg-row mt-4">

            <!-- Left Side -->
            <div class="col-lg-8">

                <!-- System Performance and Health -->
                <div class="row">
                    <div class="col-md-6">
                        <x-adminlte-card title="System Load & Capacity" theme="" icon="" collapsible>
                            <x-slot name="titleSlot">
                                <h4 class="card-title">System Load & Capacity</h4>
                            </x-slot>
                            
                            <div class="row text-center">
                                <div class="col-4 border-right">
                                    <div class="mb-2">CPU</div>
                                    <canvas id="cpuGauge" width="120" height="120"></canvas>
                                    <small class="text-muted">64% of 32 cores</small>
                                </div>
                                <div class="col-4 border-right">
                                    <div class="mb-2">Memory</div>
                                    <canvas id="memoryGauge" width="120" height="120"></canvas>
                                    <small class="text-muted">48GB/64GB</small>
                                </div>
                                <div class="col-4">
                                    <div class="mb-2">Storage</div>
                                    <canvas id="storageGauge" width="120" height="120"></canvas>
                                    <small class="text-muted">2.4TB/5TB</small>
                                </div>
                            </div>
                        </x-adminlte-card>
                    </div>

                    <div class="col-md-6">
                        <x-adminlte-card title="Peak Usage Hours" theme="" icon="" collapsible>
                            <x-slot name="titleSlot">
                                <h4 class="card-title">Peak Usage Hours</h4>
                            </x-slot>
                            
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Time</th>
                                        <th>Avg Requests</th>
                                        <th>Max RT</th>
                                        <th>Error Rate</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="bg-danger-light">
                                        <td>09:00-10:00</td>
                                        <td>4,218</td>
                                        <td>1.2s</td>
                                        <td>0.42%</td>
                                    </tr>
                                    <tr class="bg-warning-light">
                                        <td>14:00-15:00</td>
                                        <td>3,845</td>
                                        <td>0.8s</td>
                                        <td>0.31%</td>
                                    </tr>
                                    <!-- More rows -->
                                </tbody>
                            </table>
                        </x-adminlte-card>
                    </div>
                    
                    <div class="col-md-6 mt-4">
                        <x-adminlte-card title="Database Query Performance" theme="" icon="" collapsible>
                            <x-slot name="titleSlot">
                                <h4 class="card-title">Database Query Performance</h4>
                            </x-slot>
                            <div class="float-right mb-3">
                                <button class="btn btn-sm btn-outline-primary" id="refreshQueries">
                                    <i class="fas fa-sync-alt"></i> Refresh
                                </button>
                            </div>
                            <div class="chart-container" style="position: relative; height: 300px;">
                                <canvas id="queryPerformanceChart"></canvas>
                            </div>
                            <div class="mt-3 table-responsive">
                                <table class="table table-sm table-hover" id="slowQueriesTable">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </x-adminlte-card>
                    </div>

                    <div class="col-md-6 mt-4">
                        <x-adminlte-card title="Storage Utilization" theme="" icon="" collapsible>
                            <x-slot name="titleSlot">
                                <h4 class="card-title">Storage Utilization</h4>
                            </x-slot>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="chart-container" style="position: relative; height: 200px;">
                                        <canvas id="storageChart"></canvas>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="chart-container" style="position: relative; height: 200px;">
                                        <canvas id="storageTrendChart"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3">
                                <table class="table table-sm">
                                    <tr>
                                        <td>Database</td>
                                        <td>1.2TB</td>
                                        <td><div class="progress progress-xs"><div class="progress-bar bg-primary" style="width: 60%"></div></div></td>
                                    </tr>
                                    <tr>
                                        <td>Backups</td>
                                        <td>0.8TB</td>
                                        <td><div class="progress progress-xs"><div class="progress-bar bg-success" style="width: 40%"></div></div></td>
                                    </tr>
                                    <!-- More rows -->
                                </table>
                            </div>
                        </x-adminlte-card>
                    </div>
                </div>

                <div class="mt-4">
                    <x-adminlte-card title="Records Received" theme="" icon="" collapsible>
                        <!-- Month/Year Selector Row -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Month</label>
                                    <select class="form-control select2" style="width: 100%;">
                                        @foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $month)
                                            <option value="{{ $month }}" {{ $month == 'May' ? 'selected' : '' }}>{{ $month }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Year</label>
                                    <select class="form-control select2" style="width: 100%;">
                                        @foreach(range(date('Y'), date('Y') - 15) as $year)
                                            <option value="{{ $year }}" {{ $year == 2024 ? 'selected' : '' }}>{{ $year }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Info Boxes Grid -->
                        <div class="row">
                            <div class="col-md-6">
                                <x-adminlte-info-box title="National Registration Bureau" text="53,568,898" icon="fas fa-lg fa-users text-success" />
                            </div>
                            <div class="col-md-6">
                                <x-adminlte-info-box title="Civil Registration Department" text="23,984,343" icon="fas fa-lg fa-certificate text-success"/>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-6">
                                <x-adminlte-info-box title="Department of Immigration" text="17,763,238" icon="fas fa-lg fa-flag text-success" />
                            </div>
                            <div class="col-md-6">
                                <x-adminlte-info-box title="Refugee Affairs Department" text="11,821,317" icon="fas fa-lg fa-life-ring text-success" />
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-12">
                                <x-adminlte-info-box title="Registrar General" text="17,763,238" icon="fas fa-lg fa-server text-success" />
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>

                <div class="mt-4">
                    <x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Total API Requests Processed</h4>
                        </x-slot>
                        <div class="">
                            @php
                                $heads = [
                                    'Organization',
                                    'Industry',
                                    'Total Requests',
                                    'Token Balance',
                                    'Success Rate (%)',
                                    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                ];

                                $data = [
                                    ['Safaricom', 'Telco', '1,203,421','2,987,987', '98.2'],
                                    ['Airtel', 'Telco', '834,775','24,654', '97.5'],
                                    ['Equity Bank', 'FBSI', '1,509,342','234', '96.9'],
                                    ['NCBA', 'FBSI', '675,312','654,000', '95.3'],
                                    ['NHIF', 'Gov', '321,008','241,876,900', '92.6'],
                                ];

                                $config = [
                                    'order' => [[3, 'desc']],
                                    'columns' => [null, null, null, null, null, ['orderable' => false]],
                                ];
                            @endphp

                            <x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped>
                                @foreach($data as $row)
                                    <tr>
                                        @foreach($row as $cell)
                                            <td>{!! $cell !!}</td>
                                        @endforeach
                                        <td>
                                            <a href="#">
                                                <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                    <i class="fa fa-lg fa-fw fa-eye"></i>
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </x-adminlte-datatable>
                        </div>
                    </x-adminlte-card>
                </div>

                <div class="mt-4">
                    <x-adminlte-card title="Active Integrations by Industry" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Active Integrations by Industry</h4>
                        </x-slot>

                        <div class="">
                            @php
                                $heads = [
                                    'Industry',
                                    'Organization Name',
                                    'Data Type',
                                    'Monthly API Calls',
                                    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                                ];

                                $data = [
                                    ['Telco', 'Safaricom', 'ID + Birth', '45,000'],
                                    ['Telco', 'Airtel', 'ID Only', '33,500'],
                                    ['FBSI', 'Equity Bank', 'All', '64,200'],
                                    ['FBSI', 'NCBA', 'ID + Passport', '22,700'],
                                    ['Gov', 'NHIF', 'Birth Only', '17,000'],
                                ];

                                $config = [
                                    'order' => [[0, 'asc']],
                                    'columns' => [null, null, null, null, null, ['orderable' => false]],
                                ];
                            @endphp

                            <x-adminlte-datatable id="activeIntegrationsByIndustry" :heads="$heads" :config="$config" bordered hoverable striped>
                                @foreach($data as $row)
                                    <tr>
                                        @foreach($row as $cell)
                                            <td>{!! $cell !!}</td>
                                        @endforeach
                                        <td>
                                            <a href="#">
                                                <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                    <i class="fa fa-lg fa-fw fa-eye"></i>
                                                </button>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </x-adminlte-datatable>
                        </div>
                    </x-adminlte-card>
                </div>

                <div class="mt-4">
                    <x-adminlte-card title="Revenue Growth Rate" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Revenue Growth Rate</h4>
                        </x-slot>
                        <div class="d-flex justify-content-center mb-3">
                            <div class="btn-group">
                                <button id="showMonthly" class="btn btn-sm btn-success">Monthly</button>
                                <button id="showYearly" class="btn btn-sm btn-outline-success">Yearly</button>
                            </div>
                        </div>
                        <div class="chart">
                            <canvas id="revenueGrowthChart" height="250"></canvas>
                        </div>
                    </x-adminlte-card>
                </div>


                <!-- SYNC LOGS TABLE -->
                <div class="mt-4">
                    <x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Synchronization Logs</h4>
                        </x-slot>
                        <div class="float-right mb-3">
                            <div class="input-group input-group-sm">
                                <select class="form-control form-control-sm">
                                    <option>All Systems</option>
                                    <option>NRB</option>
                                    <option>CRS</option>
                                    <option>DOI</option>
                                </select>
                                <div class="input-group-append">
                                    <button class="btn btn-primary">
                                        <i class="fas fa-filter"></i> Filter
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th>System</th>
                                            <th>Last Sync</th>
                                            <th>Status</th>
                                            <th>Records</th>
                                            <th>Duration</th>
                                            <th>Details</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><span class="badge bg-primary">NRB</span></td>
                                            <td>2023-11-20 14:32:18</td>
                                            <td><span class="badge bg-success">Success</span></td>
                                            <td>+1,842 (↑312)</td>
                                            <td>42s</td>
                                            <td><button class="btn btn-xs btn-info">View</button></td>
                                        </tr>
                                        <tr>
                                            <td><span class="badge bg-teal">CRS</span></td>
                                            <td>2023-11-20 14:30:05</td>
                                            <td><span class="badge bg-warning">Partial</span></td>
                                            <td>+892 (↓104)</td>
                                            <td>1m18s</td>
                                            <td><button class="btn btn-xs btn-info">View</button></td>
                                        </tr>
                                        <tr class="bg-danger-light">
                                            <td><span class="badge bg-purple">DOI</span></td>
                                            <td>2023-11-20 13:45:22</td>
                                            <td><span class="badge bg-danger">Failed</span></td>
                                            <td>0</td>
                                            <td>N/A</td>
                                            <td>
                                                <button class="btn btn-xs btn-danger" data-toggle="popover" 
                                                        title="Error Details" 
                                                        data-content="Connection timeout to DOI server (ETIMEDOUT)">
                                                    Details
                                                </button>
                                            </td>
                                        </tr>
                                        <!-- More rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer clearfix">
                            <div class="float-right">
                                <button class="btn btn-sm btn-outline-primary mr-2">
                                    <i class="fas fa-sync-alt"></i> Refresh
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-download"></i> Export
                                </button>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>

                <!-- Data Integrity & Verification Trends -->
                <div class="mt-4">
                    <x-adminlte-card title="Pending Data Updates" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Pending Data Updates</h4>
                        </x-slot>
                                            
                        <div class="float-right mb-3">
                            <div class="input-group input-group-sm" style="width: 200px;">
                                <input type="text" name="table_search" class="form-control float-right" placeholder="Search">
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-default">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Record ID</th>
                                            <th>Source</th>
                                            <th>Issue Type</th>
                                            <th>Days Pending</th>
                                            <th>Priority</th>
                                            <th>Assigned To</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>NRB-2023-8472</td>
                                            <td><span class="badge bg-primary">NRB</span></td>
                                            <td>Data Conflict</td>
                                            <td>3</td>
                                            <td><span class="badge bg-warning">Medium</span></td>
                                            <td>Team A</td>
                                            <td>
                                                <button class="btn btn-xs btn-info">View</button>
                                                <button class="btn btn-xs btn-success">Resolve</button>
                                            </td>
                                        </tr>
                                        <tr class="bg-danger-light">
                                            <td>CRS-2023-3381</td>
                                            <td><span class="badge bg-teal">CRS</span></td>
                                            <td>Duplicate</td>
                                            <td>12</td>
                                            <td><span class="badge bg-danger">High</span></td>
                                            <td>Team B</td>
                                            <td>
                                                <button class="btn btn-xs btn-info">View</button>
                                                <button class="btn btn-xs btn-success">Resolve</button>
                                            </td>
                                        </tr>
                                        <!-- More rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer clearfix">
                            <div class="float-right">
                                <button class="btn btn-sm btn-outline-primary mr-2">
                                    <i class="fas fa-sync-alt"></i> Refresh
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-download"></i> Export
                                </button>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>

                <!-- External Organizations & Data Consumers -->
                <div class="mt-4">
                    <x-adminlte-card title="Data Sharing Compliance" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Data Sharing Compliance</h4>
                        </x-slot>
                        <div class="float-right mb-3">
                            <div class="input-group input-group-sm" style="width: 200px;">
                                <select class="form-control">
                                    <option>All Sectors</option>
                                    <option>Financial</option>
                                    <option>Government</option>
                                    <option>Commercial</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th>Organization</th>
                                            <th>Sector</th>
                                            <th>API Usage</th>
                                            <th>Compliance Score</th>
                                            <th>Last Audit</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Kenya Commercial Bank</td>
                                            <td><span class="badge bg-primary">Financial</span></td>
                                            <td>1.2M req/mo</td>
                                            <td>
                                                <div class="progress progress-xs">
                                                    <div class="progress-bar bg-success" style="width: 98%"></div>
                                                </div>
                                                <small>98%</small>
                                            </td>
                                            <td>2023-11-15</td>
                                            <td><span class="badge bg-success">Compliant</span></td>
                                        </tr>
                                        <tr>
                                            <td>Ministry of Interior</td>
                                            <td><span class="badge bg-success">Government</span></td>
                                            <td>845K req/mo</td>
                                            <td>
                                                <div class="progress progress-xs">
                                                    <div class="progress-bar bg-success" style="width: 97%"></div>
                                                </div>
                                                <small>97%</small>
                                            </td>
                                            <td>2023-11-10</td>
                                            <td><span class="badge bg-success">Compliant</span></td>
                                        </tr>
                                        <tr class="bg-warning-light">
                                            <td>MobilePay Ltd</td>
                                            <td><span class="badge bg-primary">Financial</span></td>
                                            <td>620K req/mo</td>
                                            <td>
                                                <div class="progress progress-xs">
                                                    <div class="progress-bar bg-warning" style="width: 89%"></div>
                                                </div>
                                                <small>89%</small>
                                            </td>
                                            <td>2023-10-28</td>
                                            <td><span class="badge bg-warning">Review Needed</span></td>
                                        </tr>
                                        <tr class="bg-danger-light">
                                            <td>QuickCredit Inc</td>
                                            <td><span class="badge bg-info">Commercial</span></td>
                                            <td>420K req/mo</td>
                                            <td>
                                                <div class="progress progress-xs">
                                                    <div class="progress-bar bg-danger" style="width: 76%"></div>
                                                </div>
                                                <small>76%</small>
                                            </td>
                                            <td>2023-09-15</td>
                                            <td><span class="badge bg-danger">Non-Compliant</span></td>
                                        </tr>
                                        <!-- More rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer clearfix">
                            <div class="float-right">
                                <button class="btn btn-sm btn-outline-primary mr-2">
                                    <i class="fas fa-sync-alt"></i> Refresh
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-download"></i> Export
                                </button>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>


                <!-- User Activity & Access Logs -->
                <div class="mt-4">
                    <x-adminlte-card title="Failed Login Attempts" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Failed Login Attempts</h4>
                        </x-slot>
                        <div class="">
                            <div class="input-group input-group-sm" style="width: 250px;">
                                <input type="text" class="form-control" placeholder="Search...">
                                <div class="input-group-append">
                                    <button class="btn btn-primary">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th>Timestamp</th>
                                            <th>Username</th>
                                            <th>IP Address</th>
                                            <th>Location</th>
                                            <th>Device</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="bg-danger-light">
                                            <td>2023-11-20 14:32:18</td>
                                            <td>admin</td>
                                            <td>192.168.1.45</td>
                                            <td>Nairobi, KE</td>
                                            <td>Chrome (Windows)</td>
                                            <td>
                                                <button class="btn btn-xs btn-danger">Block IP</button>
                                                <button class="btn btn-xs btn-info">Details</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2023-11-20 14:30:05</td>
                                            <td>jane.smith</td>
                                            <td>41.90.12.34</td>
                                            <td>Mombasa, KE</td>
                                            <td>Firefox (Linux)</td>
                                            <td>
                                                <button class="btn btn-xs btn-warning">Notify User</button>
                                            </td>
                                        </tr>
                                        <!-- More rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer clearfix">
                            <div class="float-right">
                                <button class="btn btn-sm btn-outline-primary mr-2">
                                    <i class="fas fa-sync-alt"></i> Refresh
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-download"></i> Export
                                </button>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>

                <!-- Data Quality & Maintenance -->
                <div class="mt-4">
                    <x-adminlte-card title="Unverified Records Pending Review" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Unverified Records Pending Review</h4>
                        </x-slot>
                        <div class="float-right mb-3">
                            <div class="input-group input-group-sm" style="width: 200px;">
                                <select class="form-control">
                                    <option>All Sources</option>
                                    <option>NRB</option>
                                    <option>CRS</option>
                                    <option>DOI</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Record ID</th>
                                            <th>Source</th>
                                            <th>Days Pending</th>
                                            <th>Priority</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="bg-danger-light">
                                            <td>NRB-2023-8472</td>
                                            <td><span class="badge bg-primary">NRB</span></td>
                                            <td>12</td>
                                            <td><span class="badge bg-danger">High</span></td>
                                            <td>
                                                <button class="btn btn-xs btn-info">Review</button>
                                                <button class="btn btn-xs btn-success">Verify</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>CRS-2023-3381</td>
                                            <td><span class="badge bg-teal">CRS</span></td>
                                            <td>5</td>
                                            <td><span class="badge bg-warning">Medium</span></td>
                                            <td>
                                                <button class="btn btn-xs btn-info">Review</button>
                                            </td>
                                        </tr>
                                        <!-- More rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer clearfix">
                            <div class="float-right">
                                <button class="btn btn-sm btn-outline-primary mr-2">
                                    <i class="fas fa-sync-alt"></i> Refresh
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-download"></i> Export
                                </button>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>

                <!-- Performance Monitoring -->
                <div class="mt-4">
                    <x-adminlte-card title="Network Traffic Analysis" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Network Traffic Analysis</h4>
                        </x-slot>
                        <div class="card-tools">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-secondary active">24h</button>
                                <button class="btn btn-sm btn-outline-secondary">7d</button>
                                <button class="btn btn-sm btn-outline-secondary">30d</button>
                            </div>
                        </div>
                        <div class="">
                            <div class="chart-container" style="position: relative; height: 300px;">
                                <canvas id="networkTrafficChart"></canvas>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-4">
                                    <div class="info-box bg-light">
                                        <span class="info-box-icon bg-primary"><i class="fas fa-server"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">Internal Traffic</span>
                                            <span class="info-box-number">12GB</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-box bg-light">
                                        <span class="info-box-icon bg-danger"><i class="fas fa-globe"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">External Traffic</span>
                                            <span class="info-box-number">30GB</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="info-box bg-light">
                                        <span class="info-box-icon bg-warning"><i class="fas fa-shield-alt"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">Blocked Requests</span>
                                            <span class="info-box-number">1.2GB</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>                

                <!-- API & System Usage -->
                <div class="mt-4">
                    <x-adminlte-card title="Response Time Trends" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">Response Time Trends</h4>
                        </x-slot>
                        <div class="">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-secondary">Hourly</button>
                                <button class="btn btn-sm btn-secondary">Daily</button>
                                <button class="btn btn-sm btn-outline-secondary">Weekly</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="responseTimeChart"></canvas>
                            </div>
                            <div class="d-flex flex-row justify-content-between mt-2">
                                <span class="mr-2">
                                    <i class="fas fa-circle text-primary"></i> Verification
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-circle text-success"></i> Search
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-circle text-info"></i> Bulk
                                </span>
                                <span>
                                    <i class="fas fa-circle text-warning"></i> Admin
                                </span>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>

                <div class="mt-4">
                    <x-adminlte-card title="API Request Volume (Last 7 Days)" theme="" icon="" collapsible>
                        <x-slot name="titleSlot">
                            <h4 class="card-title">API Request Volume (Last 7 Days)</h4>
                        </x-slot>
                        <div class="d-flex justify-content-end mb-3">
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-secondary">24h</button>
                                <button class="btn btn-sm btn-secondary">7d</button>
                                <button class="btn btn-sm btn-outline-secondary">30d</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="position-relative mb-4">
                                <canvas id="apiVolumeChart"></canvas>
                            </div>
                            <div class="d-flex flex-row justify-content-between">
                                <span class="mr-2">
                                    <i class="fas fa-square text-primary"></i> External
                                </span>
                                <span class="mr-2">
                                    <i class="fas fa-square text-teal"></i> Internal
                                </span>
                                <span>
                                    <i class="fas fa-square text-gray"></i> Failed
                                </span>
                            </div>
                        </div>
                    </x-adminlte-card>
                </div>
            </div>

            <!-- Right Side -->
            <div class="col-lg-4 d-flex flex-column">
                <x-adminlte-card title="Client Onboarding Drafts" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Client Onboarding Drafts</h4>
                    </x-slot>
                    <div class="">
                        @php
                            $heads = [
                                'ID',
                                'Client',
                                ['label' => 'Actions', 'no-export' => true, 'width' => 5],
                            ];

                            $config = [
                                'data' => \App\Models\Onboarding::where(function ($query) {
                                    $query->orWhereNull("client_rid")->orWhereNull("contract_rid")->orWhereNull("user_id");
                                })->get(),
                                'order' => [[1, 'asc']],
                                'columns' => [null, null, ['orderable' => false]],
                            ];
                        @endphp

                        <x-adminlte-datatable id="onboardingDrafts" bordered :heads="$heads" hoverable striped>
                            @foreach($config['data'] as $row)
                                <tr>
                                    <td>{{ $row->id }}</td>
                                    <td>{{ $row->client->name_fl ?? '-' }}</td>
                                    <td>
                                        <div class="d-flex">
                                            @if($row->client_rid != null)
                                                <a href="{{ route('onboarding.show', $row->id) }}"
                                                    class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                                                    <i class="fa fa-lg fa-fw fa-eye"></i>
                                                </a>
                                            @endif
                                            <a href="{{ route('onboarding.edit', $row->id) }}"
                                                class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                                                <i class="fa fa-lg fa-fw fa-pen"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </x-adminlte-datatable>
                    </div>
                </x-adminlte-card>


                <x-adminlte-card title="Sync Performance" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Sync Performance</h4>
                    </x-slot>
                    <div>
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tab-nrb">NRB</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tab-crs">CRS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tab-doi">DOI</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-nrb">
                                <div class="chart">
                                    <canvas id="nrbPerformanceChart" height="200"></canvas>
                                </div>
                                <div class="mt-3">
                                    <span class="badge bg-primary">Avg: 32s</span>
                                    <span class="badge bg-success">Success: 99.2%</span>
                                    <span class="badge bg-info">Throughput: 42 rec/s</span>
                                </div>
                            </div>
                            <!-- Other tabs -->
                        </div>
                    </div>
                </x-adminlte-card>


                <!-- Data Integrity & Verification Trends -->
                <x-adminlte-card title="Verification Success Rate Trend" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Verification Success Rate Trend</h4>
                    </x-slot>
                    <div class="float-right mb-3">
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary active">30d</button>
                            <button class="btn btn-sm btn-outline-secondary">90d</button>
                            <button class="btn btn-sm btn-outline-secondary">1y</button>
                        </div>
                    </div>
                    <div class="chart">
                        <canvas id="verificationTrendChart" height="250"></canvas>
                    </div>
                </x-adminlte-card>

                <x-adminlte-card title="Duplicate Records by Source" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Duplicate Records by Source</h4>
                    </x-slot>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="duplicatesChart" height="250"></canvas>
                        </div>
                        <div class="mt-3 d-flex justify-content-around text-center">
                            <div>
                                <span class="badge bg-primary">NRB: 48%</span>
                            </div>
                            <div>
                                <span class="badge bg-teal">CRS: 33%</span>
                            </div>
                            <div>
                                <span class="badge bg-purple">DOI: 19%</span>
                            </div>
                        </div>
                    </div>
                </x-adminlte-card>

                <x-adminlte-card title="Duplicate Trend (Last 30 Days)" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Duplicate Trend (Last 30 Days)</h4>
                    </x-slot>
                    <div class="chart">
                        <canvas id="duplicatesTrendChart" height="250"></canvas>
                    </div>
                </x-adminlte-card>



                <!-- External Organizations & Data Consumers -->
                <x-adminlte-card title="Top Requesting Organizations (Last 30 Days)" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Top Requesting Organizations (Last 30 Days)</h4>
                    </x-slot>
                    <div class="float-right">
                        <button class="btn btn-sm btn-outline-primary">View All</button>
                    </div>
                    <div class="chart">
                        <canvas id="topOrganizationsChart" height="300"></canvas>
                    </div>
                </x-adminlte-card>

                <!-- API & System Usage -->
                <x-adminlte-card title="API Requests by Source (Last 7 Days)" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">API Requests by Source (Last 7 Days)</h4>
                    </x-slot>
                    <div class="float-right mb-3">
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary">24h</button>
                            <button class="btn btn-sm btn-secondary">7d</button>
                            <button class="btn btn-sm btn-outline-secondary">30d</button>
                        </div>
                    </div>
                    <div>
                        <div class="chart">
                            <canvas id="apiRequestsChart" height="300"></canvas>
                        </div>
                        <div class="d-flex flex-row justify-content-between mt-2">
                            <span class="mr-2">
                                <i class="fas fa-square text-primary"></i> Financial
                            </span>
                            <span class="mr-2">
                                <i class="fas fa-square text-success"></i> Government
                            </span>
                            <span class="mr-2">
                                <i class="fas fa-square text-info"></i> Telecom
                            </span>
                            <span>
                                <i class="fas fa-square text-warning"></i> Other
                            </span>
                        </div>
                    </div>
                </x-adminlte-card>

                <!-- User Activity & Access Logs -->
                <x-adminlte-card title="Most Active Users (Last 7 Days)" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Most Active Users (Last 7 Days)</h4>
                    </x-slot>
                    <div class="float-right">
                        <button class="btn btn-sm btn-outline-primary">View All</button>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="activeUsersChart" height="250"></canvas>
                        </div>
                        <div class="mt-3">
                            <table class="table table-sm">
                                <tr>
                                    <td>1.</td>
                                    <td>John Doe</td>
                                    <td>Admin</td>
                                    <td>142 sessions</td>
                                </tr>
                                <tr>
                                    <td>2.</td>
                                    <td>Jane Smith</td>
                                    <td>Data Analyst</td>
                                    <td>128 sessions</td>
                                </tr>
                                <!-- More rows -->
                            </table>
                        </div>
                    </div>
                </x-adminlte-card>

                <x-adminlte-card title="User Activity Heatmap" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">User Activity Heatmap</h4>
                    </x-slot> 
                    <canvas id="activityHeatmap" height="250"></canvas>
                    <div class="mt-2 text-center">
                        <span class="badge bg-success mr-2">Low</span>
                        <span class="badge bg-warning mr-2">Medium</span>
                        <span class="badge bg-danger">High</span>
                    </div>
                </x-adminlte-card>

                <x-adminlte-card title="Sync Queue Status" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Sync Queue Status</h4>
                    </x-slot>
                    <div>
                        <div class="position-relative mb-4">
                            <canvas id="queueStatusChart" height="250"></canvas>
                        </div>
                        <div class="d-flex justify-content-around text-center">
                            <div>
                                <div class="text-lg">1,842</div>
                                <div class="text-muted">Queued</div>
                            </div>
                            <div>
                                <div class="text-lg">4,218</div>
                                <div class="text-muted">Processed (24h)</div>
                            </div>
                            <div>
                                <div class="text-lg">18</div>
                                <div class="text-muted">Failed</div>
                            </div>
                        </div>
                    </div>
                </x-adminlte-card>

                <x-adminlte-card title="Usage Distribution" theme="" icon="" collapsible>
                    <x-slot name="titleSlot">
                        <h4 class="card-title">Usage Distribution</h4>
                    </x-slot>
                    <div>
                        <canvas id="usagePieChart" height="250"></canvas>
                        <div class="mt-3 text-center">
                            <span class="badge bg-primary mr-2">Financial: 42%</span>
                            <span class="badge bg-success mr-2">Government: 31%</span>
                            <span class="badge bg-info">Commercial: 27%</span>
                        </div>
                    </div>
                </x-adminlte-card>


            </div>
        </div>
    </main>
@stop

@section('css')
    <style>
        .gauge {
            width: 100%;
            height: 100px;
        }

        .bg-danger-light {
            background-color: rgba(220,53,69,.1);
        }

        .bg-warning-light {
            background-color: rgba(255,193,7,.1);
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0,0,0,.03);
        }

        .chart {
            min-height: 200px;
        }

        .progress-xs {
            height: 0.5rem;
        }

        .table-sm td {
            padding: 0.3rem;
        }

        .info-box {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .info-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
@stop

@section('js')
    <script src='/vendor/chart.js/Chart.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>

         // API Volume Chart (would use real data)
        new Chart(document.getElementById('apiVolumeChart'), {
            type: 'bar',
            data: {
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                datasets: [{
                    label: 'External',
                    data: [32000, 30100, 41200, 38300, 40400, 21500, 18700],
                    backgroundColor: '#007bff'
                }, {
                    label: 'Internal',
                    data: [9800, 10200, 12400, 11500, 9200, 7100, 5300],
                    backgroundColor: '#20c997'
                }, {
                    label: 'Failed',
                    data: [120, 85, 64, 92, 115, 42, 28],
                    backgroundColor: '#6c757d'
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: { stacked: true },
                    y: { stacked: true }
                }
            }
        });


        // Gauge Charts
        // CPU Gauge
        const cpuCtx = document.getElementById('cpuGauge').getContext('2d');
        new Chart(cpuCtx, {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [64, 36],
                    backgroundColor: [
                        getColor(64),
                        '#f0f0f0'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                circumference: 180,
                rotation: -90,
                cutout: '80%',
                plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false }
                }
            }
        });

        // Memory Gauge
        const memoryCtx = document.getElementById('memoryGauge').getContext('2d');
        new Chart(memoryCtx, {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [75, 25],
                    backgroundColor: [
                        getColor(75),
                        '#f0f0f0'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                circumference: 180,
                rotation: -90,
                cutout: '80%',
                plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false }
                }
            }
        });

        // Storage Gauge
        const storageCtx = document.getElementById('storageGauge').getContext('2d');
        new Chart(storageCtx, {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [48, 52],
                    backgroundColor: [
                        getColor(48),
                        '#f0f0f0'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                circumference: 180,
                rotation: -90,
                cutout: '80%',
                plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false }
                }
            }
        });

        function getColor(value) {
            if (value < 50) return '#28a745'; // Green
            if (value < 75) return '#ffc107'; // Yellow
            return '#dc3545'; // Red
        }
            // Queue Status Chart
        new Chart(document.getElementById('queueStatusChart'), {
            type: 'doughnut',
            data: {
                labels: ['Processed', 'Queued', 'Failed'],
                datasets: [{
                    data: [4218, 1842, 18],
                    backgroundColor: [
                        '#28a745',
                        '#17a2b8',
                        '#dc3545'
                    ]
                }]
            },
            options: {
                cutout: '70%',
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

            // NRB Performance Chart
        new Chart(document.getElementById('nrbPerformanceChart'), {
            type: 'line',
            data: {
                labels: Array.from({length: 24}, (_, i) => i + ':00'),
                datasets: [{
                    label: 'Sync Duration (sec)',
                    data: [28, 25, 22, 18, 20, 25, 30, 35, 42, 38, 35, 32, 30, 28, 25, 30, 35, 40, 45, 42, 38, 35, 30, 28],
                    borderColor: '#007bff',
                    backgroundColor: 'rgba(0, 123, 255, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Enable popovers for error details
        $(function () {
            $('[data-toggle="popover"]').popover()
        });

        // Verification Trend Chart
        new Chart(document.getElementById('verificationTrendChart'), {
            type: 'line',
            data: {
                labels: Array.from({length: 30}, (_, i) => i+1 + ' Nov'),
                datasets: [{
                    label: 'Success Rate (%)',
                    data: [97.2, 97.5, 97.8, 98.1, 97.9, 98.3, 98.5, 98.7, 98.6, 98.4, 98.5, 98.7, 98.8, 98.6, 98.9, 99.0, 98.8, 98.7, 98.9, 99.0, 98.8, 98.9, 99.0, 99.1, 99.0, 98.9, 98.8, 98.7, 98.8, 98.7],
                    borderColor: '#20c997',
                    backgroundColor: 'rgba(32, 201, 151, 0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        min: 95,
                        max: 100,
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });

        // Duplicates Chart
        new Chart(document.getElementById('duplicatesChart'), {
            type: 'bar',
            data: {
                labels: ['NRB', 'CRS', 'DOI'],
                datasets: [{
                    label: 'Duplicate Records',
                    data: [892, 612, 338],
                    backgroundColor: [
                        'rgba(13, 110, 253, 0.7)',
                        'rgba(32, 201, 151, 0.7)',
                        'rgba(111, 66, 193, 0.7)'
                    ],
                    borderColor: [
                        '#0d6efd',
                        '#20c997',
                        '#6f42c1'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

            // Top Organizations Chart
        new Chart(document.getElementById('topOrganizationsChart'), {
            type: 'bar',
            data: {
                labels: ['Kenya Commercial Bank', 'Ministry of Interior', 'Equitel', 'Safaricom', 'Co-op Bank'],
                datasets: [{
                    label: 'API Requests (thousands)',
                    data: [1200, 845, 720, 680, 550],
                    backgroundColor: 'rgba(58, 115, 240, 0.7)',
                    borderColor: 'rgba(58, 115, 240, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return value + 'K';
                            }
                        }
                    }
                }
            }
        });

            // Usage Pie Chart
        new Chart(document.getElementById('usagePieChart'), {
            type: 'doughnut',
            data: {
                labels: ['Financial', 'Government', 'Commercial'],
                datasets: [{
                    data: [42, 31, 27],
                    backgroundColor: [
                        'rgba(13, 110, 253, 0.7)',
                        'rgba(40, 167, 69, 0.7)',
                        'rgba(23, 162, 184, 0.7)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // API Requests by Source Chart
        new Chart(document.getElementById('apiRequestsChart'), {
            type: 'bar',
            data: {
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                datasets: [
                    {
                        label: 'Financial',
                        data: [42000, 39800, 43200, 45800, 41200, 28500, 22400],
                        backgroundColor: '#0d6efd'
                    },
                    {
                        label: 'Government',
                        data: [18500, 17400, 19200, 20100, 21800, 15400, 12100],
                        backgroundColor: '#198754'
                    },
                    {
                        label: 'Telecom',
                        data: [12500, 13200, 14200, 13800, 14600, 9800, 8200],
                        backgroundColor: '#0dcaf0'
                    },
                    {
                        label: 'Other',
                        data: [6800, 7200, 6500, 7100, 6900, 5200, 4100],
                        backgroundColor: '#ffc107'
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: { stacked: true },
                    y: { stacked: true }
                }
            }
        });

            // Response Time Trends Chart
        new Chart(document.getElementById('responseTimeChart'), {
            type: 'line',
            data: {
                labels: Array.from({length: 24}, (_, i) => i + ':00'),
                datasets: [
                    {
                        label: 'Verification',
                        data: [85, 82, 80, 78, 82, 90, 95, 98, 102, 105, 100, 98, 95, 92, 90, 95, 100, 105, 110, 108, 105, 100, 95, 90],
                        borderColor: '#0d6efd',
                        backgroundColor: 'rgba(13, 110, 253, 0.1)',
                        tension: 0.3
                    },
                    {
                        label: 'Search',
                        data: [180, 175, 170, 165, 170, 185, 195, 205, 215, 220, 210, 200, 195, 190, 185, 190, 200, 210, 220, 215, 210, 200, 190, 180],
                        borderColor: '#198754',
                        backgroundColor: 'rgba(25, 135, 84, 0.1)',
                        tension: 0.3
                    },
                    // Additional datasets...
                ]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        title: {
                            display: true,
                            text: 'Response Time (ms)'
                        }
                    }
                }
            }
        });

        // Active Users Chart
        new Chart(document.getElementById('activeUsersChart'), {
            type: 'bar',
            data: {
                labels: ['John Doe', 'Jane Smith', 'Mike Johnson', 'Sarah Williams', 'David Brown'],
                datasets: [{
                    label: 'Active Sessions',
                    data: [142, 128, 98, 87, 76],
                    backgroundColor: 'rgba(58, 115, 240, 0.7)',
                    borderColor: 'rgba(58, 115, 240, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

            // Activity Heatmap

            // Register the matrix controller
        new Chart(document.getElementById('activityHeatmap'), {
            type: 'bar',
            data: {
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                datasets: [
                    {
                        label: '08:00',
                        data: [20, 15, 18, 22, 17, 5, 3],
                        backgroundColor: '#28a745' // Green
                    },
                    {
                        label: '10:00',
                        data: [35, 40, 32, 38, 42, 12, 8],
                        backgroundColor: '#ffc107' // Yellow
                    },
                    {
                        label: '12:00',
                        data: [45, 50, 48, 52, 55, 25, 15],
                        backgroundColor: '#fd7e14' // Orange
                    },
                    {
                        label: '14:00',
                        data: [30, 35, 32, 38, 40, 18, 10],
                        backgroundColor: '#ffc107' // Yellow
                    },
                    {
                        label: '16:00',
                        data: [32, 38, 35, 40, 42, 20, 12],
                        backgroundColor: '#fd7e14' // Orange
                    },
                    {
                        label: '18:00',
                        data: [15, 20, 18, 22, 25, 10, 5],
                        backgroundColor: '#28a745' // Green
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        stacked: true,
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.raw + ' sessions';
                            }
                        }
                    }
                }
            }
        });

         // Duplicates Trend Chart
        new Chart(document.getElementById('duplicatesTrendChart'), {
            type: 'line',
            data: {
                labels: Array.from({length: 30}, (_, i) => i+1 + ' Nov'),
                datasets: [
                    {
                        label: 'NRB',
                        data: [45, 42, 48, 50, 52, 55, 53, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20, 18, 15, 12, 10, 8, 5, 3, 2, 1, 0],
                        borderColor: '#0d6efd',
                        backgroundColor: 'rgba(13, 110, 253, 0.1)',
                        tension: 0.3
                    },
                    {
                        label: 'CRS',
                        data: [30, 28, 32, 35, 38, 40, 42, 45, 48, 50, 52, 55, 53, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20, 18, 15, 12, 10],
                        borderColor: '#20c997',
                        backgroundColor: 'rgba(32, 201, 151, 0.1)',
                        tension: 0.3
                    },
                    {
                        label: 'DOI',
                        data: [20, 18, 22, 25, 28, 30, 32, 35, 38, 40, 42, 45, 48, 50, 52, 55, 53, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28, 25, 22, 20],
                        borderColor: '#6f42c1',
                        backgroundColor: 'rgba(111, 66, 193, 0.1)',
                        tension: 0.3
                    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Duplicate Records'
                        }
                    }
                }
            }
        });

        // Query Performance Chart
        new Chart(document.getElementById('queryPerformanceChart'), {
            type: 'bar',
            data: {
                labels: ['User Auth', 'Data Search', 'Reports', 'API Calls', 'Admin'],
                datasets: [{
                    label: 'Query Time (ms)',
                    data: [142, 210, 320, 185, 95],
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(255, 159, 64, 0.7)',
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Milliseconds'
                        }
                    }
                }
            }
        });

           // Storage Utilization
        new Chart(document.getElementById('storageChart'), {
            type: 'doughnut',
            data: {
                labels: ['Used', 'Free'],
                datasets: [{
                    data: [48, 52],
                    backgroundColor: ['#20c997', '#f8f9fa'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%'
            }
        });

        // Storage Trend
        new Chart(document.getElementById('storageTrendChart'), {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    label: 'Storage Used (TB)',
                    data: [1.2, 1.4, 1.6, 1.8, 2.0, 2.2],
                    borderColor: '#20c997',
                    backgroundColor: 'rgba(32, 201, 151, 0.1)',
                    fill: true,
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Network Traffic
        new Chart(document.getElementById('networkTrafficChart'), {
            type: 'line',
            data: {
                labels: Array.from({length: 24}, (_, i) => i + ':00'),
                datasets: [
                    {
                        label: 'Internal',
                        data: [10,12,15,18,20,25,30,35,40,45,50,55,60,55,50,45,40,35,30,25,20,15,10,8],
                        borderColor: '#0d6efd',
                        backgroundColor: 'rgba(13, 110, 253, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: 'External',
                        data: [20,25,30,35,40,50,60,70,80,90,100,110,120,110,100,90,80,70,60,50,40,30,20,15],
                        borderColor: '#dc3545',
                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                        tension: 0.3,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Traffic (GB)'
                        }
                    }
                }
            }
        });

        $(document).ready(function() {
            // Dummy data - replace with your actual data
            const monthlyData = {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                revenue: [65000, 59000, 80000, 81000, 56000, 55000, 40000, 72000, 88000, 94000, 102000, 118000],
                growth: [0, -9.2, 35.6, 1.3, -30.9, -1.8, -27.3, 80.0, 22.2, 6.8, 8.5, 15.7]
            };

            const yearlyData = {
                labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
                revenue: [850000, 920000, 1050000, 1120000, 1250000, 1420000],
                growth: [0, 8.2, 14.1, 6.7, 11.6, 13.6]
            };

            const ctx = document.getElementById('revenueGrowthChart').getContext('2d');
            let chart;

            function renderChart(data) {
                if (chart) {
                    chart.destroy();
                }

                chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [
                            {
                                label: 'Revenue ($)',
                                data: data.revenue,
                                backgroundColor: 'rgba(20, 176, 76, 1)',
                                borderColor: 'rgba(20, 176, 76, 1)',
                                borderWidth: 1,
                                yAxisID: 'y'
                            },
                            {
                                label: 'Growth Rate (%)',
                                data: data.growth,
                                type: 'line',
                                borderColor: 'rgba(230, 57, 70, 1)',
                                backgroundColor: 'rgba(230, 57, 70, 0.1)',
                                borderWidth: 2,
                                pointBackgroundColor: 'rgba(230, 57, 70, 1)',
                                yAxisID: 'y1'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.dataset.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.datasetIndex === 1) {
                                            label += context.raw + '%';
                                        } else {
                                            label += '$' + context.raw.toLocaleString();
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                type: 'linear',
                                display: true,
                                position: 'left',
                                title: {
                                    display: true,
                                    text: 'Revenue ($)'
                                }
                            },
                            y1: {
                                type: 'linear',
                                display: true,
                                position: 'right',
                                title: {
                                    display: true,
                                    text: 'Growth Rate (%)'
                                },
                                grid: {
                                    drawOnChartArea: false
                                },
                                min: -50,
                                max: 100
                            }
                        }
                    }
                });
            }
            // Initial render with monthly data
            renderChart(monthlyData);

            // Toggle between views
            $('#showMonthly').click(function() {
                $(this).removeClass('btn-outline-success').addClass('btn-success');
                $('#showYearly').removeClass('btn-success').addClass('btn-outline-success');
                renderChart(monthlyData);
            });

            $('#showYearly').click(function() {
                $(this).removeClass('btn-outline-success').addClass('btn-success');
                $('#showMonthly').removeClass('btn-success').addClass('btn-outline-success');
                renderChart(yearlyData);
            });
        });

    </script>
@stop


@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugin', true)
