@extends('layout.layout')

@section('content')
    @php
        $quickParams = array_filter([
        ], fn($value) => !is_null($value) && $value !== '');

        $tabItems = [
            ['key' => 'overview', 'label' => 'Overview'],
            ['key' => 'trainers', 'label' => 'Trainers'],
            ['key' => 'students', 'label' => 'Students'],
            ['key' => 'slots', 'label' => 'Slots'],
            ['key' => 'complaints', 'label' => 'Complaints'],
        ];
    @endphp

    <div class="container-fluid py-3">
        <style>
            .report-shell {
                background: #f8f9fb;
                border: 1px solid #e5e7eb;
                border-radius: 20px;
                padding: 18px;
            }

            .report-box,
            .report-sidebar,
            .report-card {
                background: #fff;
                border: 1px solid #e5e7eb;
                border-radius: 18px;
                box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
            }

            .report-box {
                padding: 18px;
            }

            .report-sidebar {
                padding: 14px;
                position: sticky;
                top: 90px;
            }

            .tab-link {
                width: 100%;
                text-align: left;
                border: 1px solid #e5e7eb;
                background: #fff;
                color: #111827;
                border-radius: 14px;
                padding: 12px 14px;
                margin-bottom: 10px;
                font-weight: 600;
            }

            .tab-link.active {
                background: #111827;
                border-color: #111827;
                color: #fff;
            }

            .tab-pane-panel {
                display: none;
            }

            .tab-pane-panel.active {
                display: block;
            }

            .metric-tile,
            .summary-tile {
                display: block;
                background: #fff;
                border: 1px solid #e5e7eb;
                border-radius: 16px;
                padding: 16px;
                color: inherit;
                text-decoration: none;
            }

            .report-card .card-header {
                background: #fff;
                border-bottom: 1px solid #f1f5f9;
                border-top-left-radius: 18px;
                border-top-right-radius: 18px;
            }

            .rank-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                padding: 12px 0;
                border-bottom: 1px solid #eef2f7;
            }

            .rank-row:last-child {
                border-bottom: 0;
            }

            .rank-bar {
                height: 8px;
                border-radius: 999px;
                background: #e5e7eb;
                overflow: hidden;
                flex: 1;
            }

            .rank-bar > span {
                display: block;
                height: 100%;
                background: #475569;
            }

            .progress-line {
                height: 10px;
                background: #e5e7eb;
                border-radius: 999px;
                overflow: hidden;
            }

            .progress-line > span {
                display: block;
                height: 100%;
                background: #111827;
                border-radius: inherit;
            }

            .report-toolbar {
                width: 100%;
                max-width: 560px;
            }

            .quick-filters {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            .chart-wrap {
                position: relative;
                width: 100%;
                min-height: 280px;
            }

            .chart-wrap--sm {
                min-height: 220px;
            }

            .limitation-item {
                border-left: 3px solid #111827;
                padding-left: 12px;
                color: #475569;
            }

            @media(max-width:991.98px) {
                .report-sidebar {
                    position: static;
                }
            }

            @media(max-width:767.98px) {
                .report-shell {
                    padding: 14px;
                }

                .rank-row {
                    flex-wrap: wrap;
                    align-items: flex-start;
                }

                .report-toolbar {
                    max-width: 100%;
                }
            }
        </style>

        <div class="report-shell">
            <div class="report-box mb-3">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
                    <div>
                        <div class="small text-uppercase mb-2">Schedule & Complaints Control Center</div>
                        <div class="h4 mb-2">Schedule & Complaints Reports</div>
                        <p class="mb-0">
                            {{ $fromDate->format('M d, Y') }} - {{ $toDate->format('M d, Y') }}
                            <span class="mx-2">|</span>
                            {{ $selectedTrack->name_en ?? 'All programs' }}
                        </p>
                    </div>

                    <div class="report-toolbar">
                        <div class="mb-3">
                            <form method="GET" action="{{ route('schedule-complaint-reports.index') }}"
                                class="row g-2 align-items-end">
                                <div class="col-sm-5">
                                    <label class="form-label small mb-1">From</label>
                                    <input type="date" name="from" value="{{ $filters['from'] }}" class="form-control">
                                </div>
                                <div class="col-sm-5">
                                    <label class="form-label small mb-1">To</label>
                                    <input type="date" name="to" value="{{ $filters['to'] }}" class="form-control">
                                </div>
                                <div class="col-sm-1">
                                    <button type="submit" class="btn btn-dark">Apply</button>
                                </div>
                            </form>
                        </div>

                        <div class="quick-filters">
                            <a href="{{ route('schedule-complaint-reports.index', array_merge($quickParams, ['preset' => 'today'])) }}"
                                class="btn btn-sm {{ $preset === 'today' ? 'btn-dark' : 'btn-outline-secondary' }}">Today</a>
                            <a href="{{ route('schedule-complaint-reports.index', array_merge($quickParams, ['preset' => 'last7'])) }}"
                                class="btn btn-sm {{ $preset === 'last7' ? 'btn-dark' : 'btn-outline-secondary' }}">Last 7
                                Days</a>
                            <a href="{{ route('schedule-complaint-reports.index', array_merge($quickParams, ['preset' => 'last30'])) }}"
                                class="btn btn-sm {{ $preset === 'last30' ? 'btn-dark' : 'btn-outline-secondary' }}">Last 30
                                Days</a>
                            <a href="{{ route('schedule-complaint-reports.index') }}"
                                class="btn btn-sm btn-outline-secondary">Reset</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-lg-3">
                    <div class="report-sidebar">
                        @foreach ($tabItems as $item)
                            <button type="button" class="tab-link {{ $loop->first ? 'active' : '' }}"
                                data-tab="{{ $item['key'] }}">{{ $item['label'] }}</button>
                        @endforeach
                    </div>
                </div>

                <div class="col-lg-9">
                    <div id="tab-overview" class="tab-pane-panel active">
                        <div class="row g-3 mb-3">
                            @foreach ($overviewCards as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase">{{ $card['label'] }}</div>
                                        <div class="display-6 fw-bold">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3 mb-3">
                            @foreach ($insightCards as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase mb-2">{{ $card['label'] }}</div>
                                        <div class="h4 mb-0">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3">
                            <div class="col-xl-8">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Activity Trend</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap">
                                            <canvas id="overviewChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Operational Snapshot</div>
                                    </div>
                                    <div class="card-body px-3 pb-3">
                                        @foreach ($overviewHighlights as $item)
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <strong>{{ $item['value'] }}</strong>
                                            </div>
                                        @endforeach

                                        <hr class="my-3">

                                        @foreach ($snapshotItems as $item)
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <span class="badge bg-secondary">{{ $item['value'] }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-trainers" class="tab-pane-panel">
                        <div class="row g-3 mb-3">
                            @foreach ($sections['trainers']['cards'] as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase">{{ $card['label'] }}</div>
                                        <div class="h3 mb-0">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Trainers By Program</div>
                                        <p class="mb-0">Active trainer coverage across assigned programs</p>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap chart-wrap--sm">
                                            <canvas id="trainerTrackChart"></canvas>
                                        </div>
                                        <div class="mt-3">
                                            @forelse ($charts['trainer_tracks']['labels'] as $index => $label)
                                                @php
                                                    $value = $charts['trainer_tracks']['values'][$index] ?? 0;
                                                    $max = max($charts['trainer_tracks']['values']->toArray() ?: [1]);
                                                @endphp
                                                <div class="rank-row">
                                                    <span>{{ $label }}</span>
                                                    <div class="rank-bar"><span style="width: {{ $max > 0 ? ($value / $max) * 100 : 0 }}%"></span></div>
                                                    <strong>{{ $value }}</strong>
                                                </div>
                                            @empty
                                                <div>No program distribution in this range.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Trainer Utilization</div>
                                        <p class="mb-0">Booked hours over recurring slot capacity</p>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap chart-wrap--sm">
                                            <canvas id="utilizationChart"></canvas>
                                        </div>
                                        <div class="mt-3">
                                            @forelse ($sections['trainers']['rows']->take(8) as $row)
                                                <div class="rank-row">
                                                    <span class="fw-semibold">{{ $row['name'] }}</span>
                                                    <div class="rank-bar"><span style="width: {{ min($row['utilization_pct'], 100) }}%"></span></div>
                                                    <strong>{{ $row['utilization_pct'] }}%</strong>
                                                </div>
                                            @empty
                                                <div>No utilization data in this range.</div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="report-card">
                            <div class="card-header pt-3 px-3">
                                <div class="mb-1">Teachers & Programs Report</div>
                                <p class="mb-0">Teacher count and capacity totals by program</p>
                            </div>
                            <div class="card-body p-3">
                                <div class="table-responsive">
                                    <table class="table align-middle mb-0">
                                        <thead>
                                            <tr>
                                                <th>Program</th>
                                                <th class="text-center">Teachers</th>
                                                <th class="text-end">Available Hours</th>
                                                <th class="text-end">Booked Hours</th>
                                                <th class="text-end">Remaining Hours</th>
                                                <th class="text-end">Occupancy Rate</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($sections['trainers']['program_rows'] as $row)
                                                <tr>
                                                    <td class="fw-semibold">{{ $row['program_name'] }}</td>
                                                    <td class="text-center">{{ number_format($row['teachers_count']) }}</td>
                                                    <td class="text-end">{{ $row['available_hours'] }}</td>
                                                    <td class="text-end">{{ $row['booked_hours'] }}</td>
                                                    <td class="text-end">{{ $row['remaining_hours'] }}</td>
                                                    <td class="text-end">
                                                        <span class="badge bg-dark">{{ $row['occupancy_rate'] }}%</span>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="6" class="text-center text-muted py-4">No teacher-program data in this range.</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="report-card mt-3">
                            <div class="card-header pt-3 px-3">
                                <div class="mb-1">Trainer Movement & Risk</div>
                                <p class="mb-0">Current movement signals from active teacher records</p>
                            </div>
                            <div class="card-body p-3">
                                <div class="row g-3">
                                    @foreach ($sections['trainers']['movement'] as $item)
                                        <div class="col-md-4">
                                            <div class="summary-tile h-100">
                                                <div class="small text-uppercase mb-2">{{ $item['label'] }}</div>
                                                <div class="h4 mb-0">{{ $item['value'] }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-students" class="tab-pane-panel">
                        <div class="row g-3 mb-3">
                            @foreach ($sections['students']['cards'] as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase">{{ $card['label'] }}</div>
                                        <div class="h3 mb-0">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="report-card mb-3">
                            <div class="card-header pt-3 px-3">
                                <div class="mb-1">Student Status Report</div>
                                <p class="mb-0">Student counts by status in the selected period</p>
                            </div>
                            <div class="card-body p-3">
                                <div class="row g-3">
                                    @foreach ($sections['students']['status_rows'] as $item)
                                        <div class="col-md-4">
                                            <div class="summary-tile h-100">
                                                <div class="small text-uppercase mb-2">{{ $item['label'] }}</div>
                                                <div class="h4 mb-2">{{ number_format($item['total']) }}</div>
                                                <div class="text-muted">{{ $item['description'] }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Students By Program</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap chart-wrap--sm">
                                            <canvas id="studentTrackChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Private / Semi / Group</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap chart-wrap--sm">
                                            <canvas id="studentTypeChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Age Mix</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['students']['ages'] as $item)
                                            @php
                                                $maxAges = max($sections['students']['ages']->pluck('total')->toArray() ?: [1]);
                                            @endphp
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <div class="rank-bar"><span style="width: {{ $maxAges > 0 ? ($item['total'] / $maxAges) * 100 : 0 }}%"></span></div>
                                                <strong>{{ $item['total'] }}</strong>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Program Breakdown</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @forelse ($sections['students']['tracks']->take(8) as $item)
                                            @php
                                                $maxTracks = max($sections['students']['tracks']->pluck('total')->toArray() ?: [1]);
                                            @endphp
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <div class="rank-bar"><span style="width: {{ $maxTracks > 0 ? ($item['total'] / $maxTracks) * 100 : 0 }}%"></span></div>
                                                <strong>{{ $item['total'] }}</strong>
                                            </div>
                                        @empty
                                            <div>No student-program data in this range.</div>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-slots" class="tab-pane-panel">
                        <div class="row g-3 mb-3">
                            @foreach ($sections['slots']['cards'] as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase">{{ $card['label'] }}</div>
                                        <div class="h3 mb-0">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-xl-7">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Available vs Used Slots</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap">
                                            <canvas id="slotDayChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Capacity Summary</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['slots']['hours'] as $item)
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <strong>{{ $item['value'] }}</strong>
                                            </div>
                                        @endforeach

                                        <hr class="my-3">

                                        @foreach ($sections['slots']['demand'] as $item)
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <span class="badge bg-secondary">{{ $item['value'] }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-complaints" class="tab-pane-panel">
                        <div class="row g-3 mb-3">
                            @foreach ($sections['complaints']['cards'] as $card)
                                <div class="col-md-6 col-xl-3">
                                    <div class="metric-tile h-100">
                                        <div class="small text-uppercase">{{ $card['label'] }}</div>
                                        <div class="h3 mb-0">{{ $card['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-xl-7">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Complaint Trend</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap">
                                            <canvas id="complaintTrendChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-5">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Top Complaint Reasons</div>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="chart-wrap">
                                            <canvas id="complaintReasonChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-xl-4">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Rates</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['complaints']['rates'] as $item)
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <strong>{{ $item['value'] }}</strong>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">By Department</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @foreach ($sections['complaints']['departments'] as $item)
                                            @php
                                                $maxDepartments = max($sections['complaints']['departments']->pluck('total')->toArray() ?: [1]);
                                            @endphp
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <div class="rank-bar"><span style="width: {{ $maxDepartments > 0 ? ($item['total'] / $maxDepartments) * 100 : 0 }}%"></span></div>
                                                <strong>{{ $item['total'] }}</strong>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4">
                                <div class="report-card h-100">
                                    <div class="card-header pt-3 px-3">
                                        <div class="mb-1">Top Owners</div>
                                    </div>
                                    <div class="card-body p-3">
                                        @forelse ($sections['complaints']['owners']->take(6) as $item)
                                            @php
                                                $maxOwners = max($sections['complaints']['owners']->pluck('total')->toArray() ?: [1]);
                                            @endphp
                                            <div class="rank-row">
                                                <span>{{ $item['label'] }}</span>
                                                <div class="rank-bar"><span style="width: {{ $maxOwners > 0 ? ($item['total'] / $maxOwners) * 100 : 0 }}%"></span></div>
                                                <strong>{{ $item['total'] }}</strong>
                                            </div>
                                        @empty
                                            <div>No complaint owners in this range.</div>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="report-card">
                            <div class="card-header pt-3 px-3">
                                <div class="mb-1">Refund Tracking</div>
                            </div>
                            <div class="card-body p-3">
                                <div class="row g-3 mb-3">
                                    @foreach ($sections['complaints']['refunds'] as $item)
                                        <div class="col-md-4">
                                            <div class="summary-tile h-100">
                                                <div class="small text-uppercase mb-2">{{ $item['label'] }}</div>
                                                <div class="h4 mb-0">{{ $item['value'] }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <hr class="my-3">

                                <div class="mb-2 fw-semibold">Refund Status</div>
                                @forelse ($sections['complaints']['refund_statuses'] as $item)
                                    @php
                                        $maxRefundStatuses = max($sections['complaints']['refund_statuses']->pluck('total')->toArray() ?: [1]);
                                    @endphp
                                    <div class="rank-row">
                                        <span>{{ $item['label'] }}</span>
                                        <div class="rank-bar"><span style="width: {{ $maxRefundStatuses > 0 ? ($item['total'] / $maxRefundStatuses) * 100 : 0 }}%"></span></div>
                                        <strong>{{ $item['total'] }}</strong>
                                    </div>
                                @empty
                                    <div class="text-muted">No refund status data in this range.</div>
                                @endforelse
                            </div>
                        </div>
                    </div>

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

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            const charts = @json($charts);
            const baseOptions = {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            };

            const chartInstances = {};
            const palette = ['#111827', '#475569', '#0f766e', '#b45309', '#7c3aed', '#be123c'];

            chartInstances.overview = new Chart(document.getElementById('overviewChart'), {
                type: 'line',
                data: {
                    labels: charts.overview.labels,
                    datasets: charts.overview.series.map((series, index) => ({
                        label: series.name,
                        data: series.data,
                        borderColor: palette[index % palette.length],
                        backgroundColor: `${palette[index % palette.length]}22`,
                        fill: index === 0,
                        tension: .32,
                        borderWidth: 2,
                        pointRadius: 3
                    }))
                },
                options: baseOptions
            });

            chartInstances.trainerTracks = new Chart(document.getElementById('trainerTrackChart'), {
                type: 'bar',
                data: {
                    labels: charts.trainer_tracks.labels,
                    datasets: [{
                        label: 'Trainers',
                        data: charts.trainer_tracks.values,
                        backgroundColor: '#475569',
                        borderRadius: 8
                    }]
                },
                options: {
                    ...baseOptions,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            chartInstances.utilization = new Chart(document.getElementById('utilizationChart'), {
                type: 'bar',
                data: {
                    labels: charts.utilization.labels,
                    datasets: [{
                        label: 'Utilization %',
                        data: charts.utilization.values,
                        backgroundColor: '#111827',
                        borderRadius: 8
                    }]
                },
                options: {
                    ...baseOptions,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            chartInstances.studentTracks = new Chart(document.getElementById('studentTrackChart'), {
                type: 'bar',
                data: {
                    labels: charts.students_tracks.labels,
                    datasets: [{
                        label: 'Students',
                        data: charts.students_tracks.values,
                        backgroundColor: '#0f766e',
                        borderRadius: 8
                    }]
                },
                options: {
                    ...baseOptions,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            chartInstances.studentTypes = new Chart(document.getElementById('studentTypeChart'), {
                type: 'doughnut',
                data: {
                    labels: charts.students_types.labels,
                    datasets: [{
                        data: charts.students_types.values,
                        backgroundColor: ['#111827', '#475569', '#94a3b8', '#cbd5e1']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });

            chartInstances.slotDays = new Chart(document.getElementById('slotDayChart'), {
                type: 'bar',
                data: {
                    labels: charts.slots_days.labels,
                    datasets: [{
                            label: 'Available',
                            data: charts.slots_days.available,
                            backgroundColor: '#cbd5e1',
                            borderRadius: 8
                        },
                        {
                            label: 'Used',
                            data: charts.slots_days.used,
                            backgroundColor: '#111827',
                            borderRadius: 8
                        }
                    ]
                },
                options: baseOptions
            });

            chartInstances.complaintTrend = new Chart(document.getElementById('complaintTrendChart'), {
                type: 'line',
                data: {
                    labels: charts.complaints_trend.labels,
                    datasets: [{
                        label: 'Complaints',
                        data: charts.complaints_trend.values,
                        borderColor: '#be123c',
                        backgroundColor: 'rgba(190,18,60,.12)',
                        fill: true,
                        tension: .32,
                        borderWidth: 2,
                        pointRadius: 3
                    }]
                },
                options: baseOptions
            });

            chartInstances.complaintReasons = new Chart(document.getElementById('complaintReasonChart'), {
                type: 'bar',
                data: {
                    labels: charts.complaints_reasons.labels,
                    datasets: [{
                        label: 'Complaints',
                        data: charts.complaints_reasons.values,
                        backgroundColor: '#b45309',
                        borderRadius: 8
                    }]
                },
                options: {
                    ...baseOptions,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            const activateTab = (tabName) => {
                const fallbackTab = 'overview';
                const targetTab = tabName || fallbackTab;
                const targetButton =
                    document.querySelector(`.tab-link[data-tab="${targetTab}"]`) ||
                    document.querySelector(`.tab-link[data-tab="${fallbackTab}"]`);

                document.querySelectorAll('.tab-link').forEach((item) => item.classList.remove('active'));
                document.querySelectorAll('.tab-pane-panel').forEach((panel) => panel.classList.remove('active'));

                if (!targetButton) {
                    return;
                }

                targetButton.classList.add('active');

                const targetPanel = document.getElementById(`tab-${targetButton.dataset.tab}`);

                if (targetPanel) {
                    targetPanel.classList.add('active');
                }

                if (window.location.hash !== `#${targetButton.dataset.tab}`) {
                    history.replaceState(null, '', `#${targetButton.dataset.tab}`);
                }

                localStorage.setItem('schedule_complaint_report_active_tab', targetButton.dataset.tab);

                setTimeout(() => {
                    Object.values(chartInstances).forEach((chart) => {
                        chart.resize();
                        chart.update('none');
                    });
                }, 60);
            };

            document.querySelectorAll('.tab-link').forEach((button) => {
                button.addEventListener('click', (event) => {
                    event.preventDefault();
                    activateTab(button.dataset.tab);
                });
            });

            window.addEventListener('hashchange', () => {
                const hashTab = window.location.hash.replace('#', '');
                if (hashTab) {
                    activateTab(hashTab);
                }
            });

            const hashTab = window.location.hash.replace('#', '');
            const savedTab = localStorage.getItem('schedule_complaint_report_active_tab');
            activateTab(hashTab || savedTab || 'overview');
        </script>
    @endpush
@endsection